记录几个常用的Css样式效果

1、更改字体，图标大小小于12px无效的问题

若我们设置font-size:10px是不会有效果的，需要使用 transform: scale(0.68); 更改字体最小大小

2、设置div边框虚化，阴影效果 box-shadow: #E8E8E8 0px 0px 10px 0px;"

3、更改框架原有样式不生效问题

有的时候我们想更改某些前端框架自带的样式风格，发现设置样式不生效，这个时候就需要使用 ↓ 如下方式才能生效

 :host ::ng-deep .ant-card-body{ 2 padding-top: 6px; 3 } 

 

4、自定义谷歌浏览器滚动条样式

.table_scorll_class {
        /*css主要部分的样式*/

        /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/

        ::-webkit-scrollbar {
            width: 7px;
            /*对垂直流动条有效*/
            height: 7px;
            /*对水平流动条有效*/
        }

        /*定义滚动条的轨道颜色、内阴影及圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 3px white;
            background-color: #fff;
            border-radius: 3px;
        }


        /*定义滑块颜色、内阴影及圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 7px;
            -webkit-box-shadow: inset 0 0 3px white;
            background-color: #E8E8E8;
        }

        /*定义两端按钮的样式*/
        ::-webkit-scrollbar-button {
            background-color: #fff;
        }

        /*定义右下角汇合处的样式*/
        ::-webkit-scrollbar-corner {
            background: #fff;
        }
    }