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、三角形气泡弹窗 
     
  
      
 
     
.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:        
     
            
      
       123123
      
        
     
    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、 定位代码 */ 

       
    
        
         123123
        
 
       

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