常用 CSS 代码片段集合,建议收藏 分享日常开发过程中遇到的常见CSS代码,来看看有没有你熟悉的代码,相信这么多的场景能为你节省一些些时间,建议收藏起来,说不定哪天就用上啦~ overscroll-behavior-x 内部盒子滚动到边界的时候,将触发整个页面滚动,可通过设置阻止此行为 使用 sroll-snap-type 优化滚动 在实际应用中,应用在全屏滚动或banner上有很多用武之地,不需要原始的各种尺寸位置计算 横竖虚线 css自带的虚线在某些设计场景下不够用,通过绘制虚线。 画格子 基于 渐变画格子,格子的角度及条纹之间的间隙可自行调整。
改变输入框光标的颜色 解决IOS滚动条卡顿 隐藏滚动条 webkit下修改滚动条样式 ::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-button 滚动条两端的按钮:-webkit-scrollbar-track 外层轨道::-webkit-scrollbar-track-piece 内层滚动区::-webkit-scrollbar-thumb 滚动的滑块::-webkit-scrollbar-corner 边角::-webkit-resizer 定义右下角拖动块的样式 开启硬件加速 开启了3D模式后的 过渡在IOS中闪屏,卡顿,可设置开启硬件加速解决 在webkit内核的浏览器中,另一个行之有效的方法是 清除浮动 文本溢出显示省略号 单行文本溢出,定义ellipsis函数方便调用 多行文本溢出,定义multi-ellipsis函数方便调用,line是对应的行数 使用:not() 解决最后一个素特殊样式 让列表项看上去像一个真正的用逗号分隔的列表 安卓CSS不识别边框0.5px解决办法 CSS3 nth-child()选择器 1、选择列表中的偶数标签 :nth-child(2n) 2、选择列表中的奇数标签 :nth-child(2n-1) 3、选择从第6个开始的,直到最后:nth-child(n+6) 4、选择第1个到第6个 :nth-child(-n+6) 5、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) 禁止文字选中 显示链接名称的同时并显示当前URL 当a标签没有文本值,但 href 属性有链接的时候显示链接 利用border实现三角形 要实现不同方向的三角形改变其border的代码,三角形底部对应两侧的颜色为透明。 图片灰度滤镜 自定义选中文本颜色 禁用鼠标事件 参考 使用 sroll-snap-type 优化滚动overscroll-behavior-x 「专注前端开发,分享前端相关技术干货,:南城大前端(ID: nanchengfe)」
2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/59789.html