day05

1.切角

简单的切角

width: 300px;
height: 200px;
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0);

切四个角

width: 300px;
height: 200px;
background: #58a;
background:
        linear-gradient(135deg, transparent 15px, #58a 0) top left, 
        linear-gradient(-135deg, transparent 15px, #58a 0) top right,
        linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
        linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

2梯形

第一部分

.tab {
                width: 50px;
                height: 15px;
                position: relative;
                display: inline-block;
                padding: .5em 1em .35em;
                color: white;
                text-align: center;
                
            }

第二部分

.tab::before {
                content: '';
                /* 用伪元素来生成一个矩形 */
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background: #58a;
                transform: perspective(.5em) rotateX(5deg);
                transform-origin: bottom;
            }

3饼图

.pie {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: linear-gradient(to right, yellowgreen 50%, #655 0);
            }
            
.pie::before {
        content: '';
        display: block;
        margin-left: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0 / 50%;
        background-color: yellowgreen;
        transform-origin: left;
        transform: rotate(.1turn);
        animation: spin 3s linear infinite, bg 6s step-end infinite;
            }
            
@keyframes spin {
            to {
                    transform: rotate(.5turn);
                }
            }
            
@keyframes bg {
            50% {
                background-color: #655;
                }
            }

4.阴影

单侧阴影

background:yellow ;
width: 100px;
height: 100px;
box-shadow: 0px 5px 4px -4px rgba(0,0,0,.5);

两侧阴影

box-shadow: 5px 0 5px -5px black,-5px 0 5px -5px black;
background:yellow ;
width: 100px;
height: 100px;

不规则阴影

filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5)); //filter滤镜

5染色效果

img{
    width: 300px;
    height: 300px;
    filter: sepia(1) saturate(5) hue-rotate(295deg);
        }
img:hover{
    filter: none;
    }