值 | 描述 | 备注 | |
::-webkit-scrollbar{
display: none;
}
| 去掉滚动条 找到父元素,给父元素添加该样式 .father::-webkit-scrollbar{ display: none; } | 常见于手机端,使用 flex:auto, overflow:scroll 都会默认显示滚动条 | |
transform: rotate(180deg) | 旋转 | - | |
cursor: pointer 其他属性: default 默认光标 move 某对象可被移动 text 文本 wait 程序正忙(通常是一只表或沙漏) help 可用的帮助(通常是一个问号或一个气球) | 指向光标:鼠标样式改为手势 | 常见pc端 让不可点击地方改为可点击手势,可优化交互 | |
pointer-events: none; | 点击事件失效 | ||
filter: brightness( 1 ) | 修改图片亮度 默认值为1,可以是百分比,也可以是数值, 值越接近 0 ,越黑 值越大,越白 | 详见另一篇文章有更加详细的描述 | |
user-select:none | 禁止用户选中/复制内容 | ||
user-select: all | 禁止用户选中/复制全部内容 | ||
::selection 伪元素 | 给指定的元素设置选中/复制后的样式 支持的样式: color,background-color,cursor,caret-color,outline,text-decoration,text-shadow | .div::selection { background: yellowgreen; color: #fff; } | |
writing-mode:horizontal-tb 属性值: horizontal-tb 默认值,从上到下书写方式 vertical-rl 从右到左的书写方式 vertical-lr 从左到右的书写方式 | 文本的排序方向 | 常用于古诗词的展示 | |
transform:skew(x-angle,y-angle) | 文字倾斜角度 1个参数时,表示垂直方向的倾斜角度; 2个参数时,第一个参数表示垂直方向的倾斜角度, 第二个参数表示水平方向的倾斜角度。 | ||
-webkit-box-reflect: none 属性值: none 默认值,无倒影效果 above 倒影在上方 below 倒影在下方 left 倒影在左边 right 倒影在右边 offset 倒影之间的间距 imgstyle 倒影遮罩效果,可以是图片也可以是渐变颜色 | 文字倒影效果 | -webkit-box-reflect: right 1px linear-gradient(transparent,rgba(0,0,0,0.2)); | |
white-space: pre-line; | 换行 | 一般在富文本中返回换行符不是<br>的标签,而是 \n。不使用正则转换的情况下,可通过下面样式实现换行。 | |
outline: none; text-decoration:none; | 取消默认下划线 | - | |
-webkit-text-stroke: 1px greenyellow; text-stroke: 1px greenyellow; | 文字描边 | - | |
-webkit-overflow-scrolling: touch; | 解决 ios 页面卡顿 body, html { -webkit-overflow-scrolling: touch; } | - | |
touch-callout: none; -webkit-touch-callout: none; | 禁止 ios 长按触发菜单, ios / android 长按下载图片 body, html { touch-callout: none; -webkit-touch-callout: none; } | - | |
user-select: none; -webkit-user-select: none; | 禁止选中文字 | - | |
text-transform: uppercase | 将所有字母变成大写字母 | html: <p class="a"> This is some text. </p> 结果: THIS IS SOME TEXT. | |
text-transform: lowercase | 将所有字母变成小写字母 | html: <p class="a"> This is some text. </p> 结果: this is some text. | |
text-transform: capitalize | 首字母大写 | html: <p class="a"> this is some text. </p> 结果: This Is Some Text. | |
font-variant: small-caps | 将字体变成小型的大写字母 | html: <p class="a"> This is some text. </p> 结果: |
css 样式处理汇总-持续更新中...
于 2022-07-27 17:01:09 首次发布