很实用的冷门CSS功能片段集锦

来源:【易网做网站设计/建设/制作/改版公司 | 更新:2020-12-09

很实用的冷门CSS功能片段集锦

文字

文字间距
letter-spacing: 2px;

强制为大写字母
text-transform: uppercase;
强制为小写字母
text-transform: lowercase;

不允许换行
white-space: nowrap;

=== 文字竖向排列 ===
默认:水平方向,从上到下
writing-mode:horizontal-tb;
垂直方向,从右向左
writing-mode:vertical-rl;
垂直方向,从左向右
writing-mode:vertical-lr;

小技巧:图片结合writing-mode垂直方向,加上text-align:center,可实现图片垂直居中;
再结合margin: auto实现图片上下左右中心居中效果。

屏蔽层上鼠标事件

关闭层上鼠标事件
pointer-events:none;

开启层上鼠标事件
pointer-events:auto;

强制恢复默认样式:inherit

font-size:  inherit;
padding:  inherit;
... ...

鼠标手型

cursor: pointer;

设置前缀和后缀

自动添加前缀
div:before{content:"▶";}

自动添加后缀
div:after{content:"☰";}