css 样式处理汇总-持续更新中...

描述备注
::-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 ,越黑

值越大,越白

详见另一篇文章有更加详细的描述

css 样式之 filter 滤镜属性 用法与示例_雁 南飞的博客-CSDN博客

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>

结果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值