实用CSS样式集（二）

我的20092024-04-16 11:40

1、浏览器默认样式优化，兼容火狐浏览器，若是整个页面滚动条都改变，.box改成*即可

复制代码

.box{
      overflow: auto;
      padding: 4px 8px;
      scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
      /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
      scrollbar-width: thin;
      /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
      -ms-overflow-style: none;
  }
 
 .box::-webkit-scrollbar {
    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
 .box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #c2c2c2;
}
 .box::-webkit-scrollbar-thumb:hover {
    background: #7d7d7d;
 }
 .box::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #efefef !important;
}

2、如下，缺个角的样式可以使用渐变来写

复制代码

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

红色缺角卡片css写法如下：

复制代码

.box{
    width: 350px;
    height: 70px;
    background-image: linear-gradient(135deg, transparent 10px, #f00 0);
}

四个角都缺代码如下：

复制代码

.box {
    width: 350px;
    height: 70px;
    background: linear-gradient(135deg, transparent 10px, #F07D17 0) top left,
    linear-gradient(-135deg, transparent 10px, #F07D17 0) top right,
    linear-gradient(-45deg, transparent 10px, #F07D17 0) bottom right,
    linear-gradient(45deg, transparent 10px, #F07D17 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

其他实用css样式集（一）：实用CSS样式集（一）-CSDN博客