常用的css片段

1、垂直对齐

.vc{
    position:relative;
    top:50%;
    transform:translateY(-50%)
}

2、只在一侧或者两侧有投影

        .box-shaow{
            position: absolute;
            top: 50%;
            left:50%;
            margin-left: -80px;
            margin-top: -45px;
            width: 160px;
            height: 90px;
            background-color: #ac92ec
        }
        .box-shaow::after{
            content: '';
            width: 150px;
            height: 1px;
            margin-top: 88px;
            margin-left: -75px;
            display: block;
            position: absolute;
            left:50%;
            z-index: -1;
            box-shadow: 0px 0px 8px 2px #000;
        }

3、渐变背景动画效果

        button{
            padding: 15px;
            background-image: linear-gradient(#fc6e51,#fff);
            background-size:auto 200%;
            background-position: 0 100%;
            transition: background-position 0.5s;
        }
        button:hover{
            background-position: 0 0;
        }