css3文本相关的实战案例

拼搏现实的明天。 2022-05-14 09:40 194阅读 0赞

1、文字排版相关：

direction:定义文字排列方式（全兼容）：rtl(从右向左显示)  ltr（从左向右显示）

注意：要配合unicode-bidi一起使用

<h1>文字排版</h1>
 
 h1{
 font:40px/60px "微软雅黑";
 text-shadow:1px -1px 3px #f00;
 color:#fff;
 border:1px solid #000;
 direction:rtl;
 unicode-bidi: bidi-override;
 }

效果图如下所示：

![70][]

2、文字溢出隐藏

text-overflow  定义省略文本的处理方式

clip 无省略号

ellipsis省略号(注意配合overflow:hidden和white-space:nowrap一块使用)

例子：

超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号
 
 
 p{
 width:300px;
 border:1px solid #000;
 white-space: nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 }

效果图如下所示：

![70 1][]

3、文字阴影（IE9及以下浏览器不支持哦）

text-shadow：x y blur color, …(可以加多层阴影，但加的阴影层数过多，会很卡)

参数

–x  横向偏移

–y  纵向偏移

–blur  模糊距离

–color  阴影颜色

看个简单的例子：

donnaLH
 
 
 p{
 font:40px/60px "微软雅黑";
 color:#fff;
 text-shadow:1px -1px 2px #ff0000;
 }

效果图如下：

![70 2][]

再看一个阴影叠加的例子：（先渲染后面的，再渲染前面的）

donnaLH
 
 
 P{
 color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
 }

效果图如下所示：

![70 3][]

再看一个火焰字的例子：

donanLH 
 
 
 p{
 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:100px; 
 font-weight:bold; 
 color:white;
 }

效果图如下：

![70 4][]

4、文字描边：（目前只支持webkit内核的浏览器哦，记得加webkit内核前缀）

\-webkit-text-stroke:宽度 颜色

例子：

donnaLH
 
 
 p{
 font-size:60px;
 color:#fff;
 -webkit-text-stroke: 1px red;
 }

效果图如下：

![70 5][]

[70]: /images/20220514/571202dcd5944d119189ca32b5508d08.png
[70 1]: /images/20220514/70faa6d618d540fd8f28becc54508371.png
[70 2]: /images/20220514/cffce1e7705c4db78a93644c125d1f24.png
[70 3]: /images/20220514/8f0c6be295a849ffa677f4b7c140aae0.png
[70 4]: /images/20220514/d485e27cdc794538824804236f82cc0c.png
[70 5]: /images/20220514/4f6146cc2cb94b4ea22a7af1c94ac482.png