• 1. js css禁止多次点击选中文字
• 2. 利用background 和 background-size 画边框
• 3. 设置背景
• 4. 阴影
• 5. 背景毛玻璃化
• 6. css 图标文字居中对齐的几种方法
• 7. 利用伪元素
• 8. 公共样式提取
• 9. 文字两边横线 less

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 画边框

.border {
    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. 设置背景

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

4. 阴影

场景：在所有支持 CSS 过渡和动画的 CSS 属性中，opacity 属性是性能最高的，因此很多动画效果都可以使用 opacity 属性进行性能优化。

例如：盒阴影动画效果很耗性能，就可以使用伪元素在元素底部创建一个盒阴影，然后使用 opacity 属性控制这个伪元素的显示与隐藏，性能会提升很多。

5. 背景毛玻璃化

.bg {
  backdrop-filter: blur(10px);
}

6. css 图标文字居中对齐的几种方法

参考链接: css图标文字居中对齐的几种方法

7. 利用伪元素

• 利用伪元素画圆

    .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;
    }
  }

8. 公共样式提取

• 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)

9. 文字两边横线 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%;
  }
}