CSS-小技巧-持续更新

1、js css禁止多次点击选中文字

• js方法

  <div onselectstart="return false;" >屏蔽双击选中文字的区域</div>
  

• css方法

  <div style="-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;" >
  屏蔽双击选中文字的区域
  </div>
  

2. 利用background 和 background-size 画边框

  background: linear-gradient(to left, #3686fe, #3686fe) left top no-repeat,
  linear-gradient(to bottom, #3686fe, #3686fe) left top no-repeat,
  linear-gradient(to left, #3686fe, #3686fe) right top no-repeat,
  linear-gradient(to bottom, #3686fe, #3686fe) right top no-repeat,
  linear-gradient(to left, #3686fe, #3686fe) left bottom no-repeat,
  linear-gradient(to bottom, #3686fe, #3686fe) left bottom no-repeat,
  linear-gradient(to left, #3686fe, #3686fe) right bottom no-repeat,
  linear-gradient(to left, #3686fe, #3686fe) right bottom no-repeat;
  background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;

3. 设置背景

  background: url("../../../assets/images/resource-modal-border.png") no-repeat;
  background-size: 100% 100%;

4. 背景毛玻璃化

  backdrop-filter: blur(10px);

5. 利用伪元素

• 利用伪元素画圆

    .stat-detail {
      &:before {
         content: "";
         display: block;
         width: 170px;
         height: 170px;
         background-color: transparent;
         position: absolute;
         left: 172px;
         border-radius: 100%;
         border: 6px solid #182640;
       }
    }
  

• 利用伪元素画三角形 + 定位

    .item {
       position: relative;
       &:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 3px 3px 0;
        border-style: solid;
        border-color: #6C8097 transparent transparent;
        transform: rotate(135deg);
        position: absolute;
        left: -1px;
        top: 0;
    }
  }
  

6. 公共样式提取

• less 公共样式提取

    .square(@color) {
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      position: absolute;
      left: -15px;
      top: 5px;
      background-color: @color;
    }
    .three:before {
      .square(#A7911D);
    }
  

• sass 公共样式提取

    @mixin triangle($f){
      width: 0;
      height: 0;
      border-width: 10px 10px 0;
      border-style: solid;
      border-color: $f transparent transparent;
    }
    @include triangle(#F00)
  

7. 文字两边横线 less

    .welcome-word {
      position: relative;
      font-size: 20px;
      color: #7d7d7d;
      letter-spacing: 4px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      &:before {
        content: "";
        display: block;
        width: 40px;
        height: 0;
        border: 1px solid #ccc;
        position: absolute;
        left: 22%;
        top: 50%;
      }