文字样式以及排版

Posted 2020-06-14

 

文字阴影
text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡

 1 /*双重阴影*/
 2 p:nth-last-of-type(1){
 3     color:red; font-size:80px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;text-align: center;
 4 }
 5 /*光晕文字*/
 6 p:nth-of-type(4){
 7     color:white; font-size:80px; text-align: center;text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
 8 }
 9 /*火焰文字*/
10 p:nth-child(5){
11        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:80px; font-weight:bold; color:white;text-align: center;
12 }

文字排版：
Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从右向左排列
注意要配合unicode-bidi 一块使用

我发现可以反转文字的

//排版
span{font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}

<span>博客园</span>

Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap（不换行）一块使用)

p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
<p>博客园是国内最好的学习交流网站，博客园是国内最好的学习交流网站，博客园是国内最好的学习交流网站</p>