#yyds干货盘点#css开发技巧总结

使用pointer-events禁用事件触发

• 要点：通过​​pointer-events:none​​​禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于​​<button>​​​的​​disabled​​
• 场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)
• 例子:

pointer-events: none;

使用writing-mode排版竖文

• 要点：通过​​writing-mode​​调整文本排版方向
• 场景：竖行文字、文言文、诗词
• 例子

writing-mode: vertical-rl

使用::scrollbar改变滚动条样式

• 要点：通过​​scrollbar​​的​​scrollbar-track​​和​​scrollbar-thumb​​等属性来自定义滚动条样式
• 场景：主题化、页面滚动
• 例子:

div {
    overflow: auto;
    height: 100%;
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-track {
      background-color: #f0f0f0;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background-color: #66f;
    }
  }

使用div描绘各种图形

• 要点：​​<div>​​配合其伪元素(​​::before​​、​​::after​​)通过​​clip​​、​​transform​​等方式绘制各种图形
• 场景：各种图形容器
• 例子

正方形

#square {
  width: 100px;
  height: 100px;
  background: red;
}

长方形

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}

圆形

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

椭圆形

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

三角形

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}