记录几个常用的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;

         }

     }

巴特西

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

最新文章

热门文章