CSS用法收集

1、实现悬停放大的功能，配合阴影

xx:hover{
transform：scale(1.08);
box-shadow:0px 4px 17px 1px rgb(77 78 80 / 43%);
}

2、es6里面写内联样式：

<h3 style={{color:this.COLORS[index],font-size:'16px'}}>

4、想要增加所有元素的内边距和边框但增加它的宽度用：

box-sizing: border-box;

5、opacity：0.6在Google生效，在ie8中不支持，所以背景是黑色的，ie8及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。

6、当 height 等于 line-height 时，内容是绝对垂直居中。

7、单位是rem一般保留小数点一位。

8、东西要做细致的话，建议背景图使用普通、2x两种，图标建议使用规范中的，用到媒体查询设备像素精度比例，普通屏铺1x背景，高清屏铺2x。

/* 高清屏支持 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
    .chk-list li > div {
        background-image: url(bg-chk@2x.png);
        -webkit-background-size: 100px 20px;
        background-size: 100px 20px;
    }
}

9、图片可以用Base64处理，url()里直接粘贴编码。不建议多用Base64处理，因为如果压缩之后的编码比图片本身还大，不划算。