41、css总结

1、阴影：box-shadow:0 5px 20px rgba(0,0,0,.1);


2、css实现滚动进度条效果：
body {
            position: relative;
            padding: 50px;
            font-size: 24px;
            line-height: 30px;
            background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
            background-size: 100% calc(100% - 100vh + 5px);
            background-repeat: no-repeat;
            z-index: 1;
        }
        
        body::after {
            content: "";
            position: fixed;
            top: 5px;
            left: 0;
            bottom: 0;
            right: 0;
            background: #fff;
            z-index: -1;
        }
 



3、//转换（伸缩）
transform：scale（1.08）；
//过渡效果
transtion：all .3s ease；

4、三角形气泡弹窗
 <div class="send">
  <div class="arrow"></div>
 </div>

.send {
position: relative;
width: 150px;
height: 35px;
background: #000000;
border-radius: 5px;
/* 圆角 */
margin: 30px auto 0;
}

.send .arrow {
position: absolute;
top: 8px;
left: -16px;
/* 圆角的位置需要细心调试哦 */
width: 0;
height: 0;
font-size: 0;
border: solid 8px;
border-color: transparent #000000 transparent transparent;
}

5、几种实现div水平垂直居中的方法：

html:
<body>
        <div class="wp">
            <div class="box size">123123</div>
        </div>
    </body>

css:
/* 公共代码 */
  .wp {border: 1px solid red; width: 300px; height: 300px; }
  .box { background: green; }       
  .box.size { width: 100px;height: 100px;}
/* 公共代码 */

/* 1、定位代码 */
.wp {position: relative;}
.box { position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }

/* 2、定位代码 */ .wp { position: relative; } .box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

缺点:需要确定子元素宽高

/*3、定位代码 */ .wp {position: relative;}.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

flex 不需要确定子元素宽高

/*4、定位代码 */

<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}