设计页面的基础知识库

1. 圆角边框：border-radius:length;

//圆形：border-radius：50%；

//圆角矩形：border-radius:高度的一半

//不同的圆角：border-radius:10px 20px 30px 40px;

2.盒子阴影：box-shadom：10px 10px 10px -4px #fff inset; (inset为内阴影(可写），outset为外阴影（默认不写））

//原来盒子没有阴影，鼠标经过出现div：hover{box-shadom：10px 10px 10px -4px #fff inset}

3.盒子居中：margin:0 auto; 或display:flex;align-items: center;

字体居中：text-align:center

4.去掉小圆点：.li{list-style:none;}

5.浮动：

float：left;

清楚浮动：（1）额外标签法：.clear{clear:both;}

（2）父级清除浮动法：overflow：hidden；//溢出部分删除

（3）使用after伪元素清除

（4）使用before和after双伪元素清除

6.（1） zoom：0.5 //小图标大小样式

（2）倒三角样式：.triangleDiv{ border-color: #57af1a #fff #fff #fff; border-style: solid; border-width: 100px 60px 0 60px; height: 0; width: 0; }

7.v-on：bang'din