8
#yyds干货盘点#css开发技巧总结
source link: https://blog.51cto.com/u_11365839/5695124
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
#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;
}
}
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;
}
width: 100px;
height: 100px;
background: red;
}
#rectangle {
width: 200px;
height: 100px;
background: red;
}
width: 200px;
height: 100px;
background: red;
}
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%
}
width: 100px;
height: 100px;
background: red;
border-radius: 50%
}
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}
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;
}
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK