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

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

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

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

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

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

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

 

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

 1 .table_scorll_class {
 2         /*css主要部分的样式*/
 3 
 4         /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
 5 
 6         ::-webkit-scrollbar {
 7             width: 7px;
 8             /*对垂直流动条有效*/
 9             height: 7px;
10             /*对水平流动条有效*/
11         }
12 
13         /*定义滚动条的轨道颜色、内阴影及圆角*/
14         ::-webkit-scrollbar-track {
15             -webkit-box-shadow: inset 0 0 3px white;
16             background-color: #fff;
17             border-radius: 3px;
18         }
19 
20 
21         /*定义滑块颜色、内阴影及圆角*/
22         ::-webkit-scrollbar-thumb {
23             border-radius: 7px;
24             -webkit-box-shadow: inset 0 0 3px white;
25             background-color: #E8E8E8;
26         }
27 
28         /*定义两端按钮的样式*/
29         ::-webkit-scrollbar-button {
30             background-color: #fff;
31         }
32 
33         /*定义右下角汇合处的样式*/
34         ::-webkit-scrollbar-corner {
35             background: #fff;
36         }
37     }

 

转载于:https://www.cnblogs.com/24klr/p/11176933.html