day04

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