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






 




 







            

            
posted @ 
2019-09-11 15:22 
要什么自行车y 
阅读(151) 
评论(0) 
编辑 
收藏 
举报