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