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

发表评论

相关文章