1.连续的边框图像
width: 50px;
height: 50px;
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),url(img/下载.jpg);
background-size: cover;
background-clip: padding-box,border-box; /*规定景背的绘制区域*/
background-origin: border-box;/*相对于边框来定位背景图像*/
width: 50px;
height: 50px;
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,red 0,red 1em,
transparent 0,transparent 2em,
#58a 0,#58a 3em,transparent 0,transparent 4em);
2.自适应的椭圆
width: 120px;
height: 80px;
border-radius: 30px 0px 30px 0;
border-radius: 40%/30px;
background: orange;
3平行四边形
width: 200px;
height: 200px;
background-color: red;
transform: skewX(45deg);
（可做伪元素平行四边形）
4菱形头像
第一部分
div{
width: 200px;
height: 200px;
transform: rotate(-45deg);
overflow: hidden;
}
第二部分
img{
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
5裁剪
第一部分
地址
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
width: 300px;
height: 300px;
}
第二部分
img:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
