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

来源：恒创科技编辑：恒创科技编辑部

2024-01-19 14:20:59

使用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;
}

本文地址：https://www.henghost.com/jishu/18018/