常用的css样式

原创已于 2023-07-13 21:25:53 修改 · 361 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2023-06-08 18:00:08 首次发布

文章介绍了如何使用CSS来修改网页滚动条的样式，包括滚动条的整体宽度、高度、颜色以及内嵌滑块和外层轨道的样式。同时，展示了在div元素上添加三角形标记的方法，利用伪元素和绝对定位实现。

一、修改滚动条样式

// -webkit-scrollbar 滚动条整体部分
// -webkit-scrollbar-button 滚动条两端的按钮
// -webkit-scrollbar-track 外层轨道
// -webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
// -webkit-scrollbar-thumb 内嵌滑块
// -webkit-scrollbar-corner 边角
// -webkit-resizer 定义右下角拖动块的样式

    &::-webkit-scrollbar {
      // 背景:滚动条整体部分
      width: 7px;
      height: 9px;
      background-color: #e9f0ff;
      // border: 1px solid red !important;
    }
    &::-webkit-scrollbar-thumb {
      // 滚动条内嵌滑块
      // border: 1px solid blue !important;
      background: rgba(144, 147, 153, 0.3);
      // border: 1px solid rgba(144, 147, 153, 0.3);
      border-radius: 3px;
    }
    &::-webkit-scrollbar-track {
      // border: 1px solid yellow !important;
      // 滚动条外层轨道
      border-radius: 3px;
      // background: rgba(255, 255, 255, 1);
      background: #e9f0ff;
    }

二、div上增加三角标

.div {
        position: absolute;
        top: -50%;
        width: 80px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border: 1px solid #c2b6b6;
        background: #c2b6b6;
        // padding: 4px 6px;
        &::before {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 0;
          border: 10px solid;
          border-color: #c2b6b6 transparent transparent;
        }
      }