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编辑  收藏  举报