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%);
}
