记录几个常用的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{ padding-top: 6px; }

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

.table_scorll_class {
/*css主要部分的样式*/ /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar {
width: 7px;
/*对垂直流动条有效*/
height: 7px;
/*对水平流动条有效*/
} /*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 3px white;
background-color: #fff;
border-radius: 3px;
} /*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
border-radius: 7px;
-webkit-box-shadow: inset 3px white;
background-color: #E8E8E8;
} /*定义两端按钮的样式*/
::-webkit-scrollbar-button {
background-color: #fff;
} /*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
background: #fff;
}
}