1.連續(xù)的邊框圖像

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; /*規(guī)定景背的繪制區(qū)域*/
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%);
            }