原文:

记录几种常见的文字效果

一、文字剪贴蒙版

在PS中，对文字图层栅格化，然后可将其他图层创建为文字的剪贴蒙版,而在css中要实现类似的文字效果，我们需要先设置背景裁剪（background-clip）为文字（text）,然后将字体颜色（color）或者文字填充（text-fill-color）设置为透明（transparent）即可实现将背景转化为当前元素的剪贴蒙版的相同效果；

 

为了更好的效果首先我们定义一个简单的的公共样式，如下：

.div{
         font-weight: bold;     font-size: 80px;     margin: 50px;     border: 10px dashed #666; }

1、背景图片剪贴蒙版

设置背景图片，设置背景裁剪和文字颜色

.bg-clip{
         background-image: url(../img/1.jpg);     background-size: cover;     -webkit-background-clip: text;     background-clip: text;     color:transparent; }

      
       图片背景文字剪贴蒙版
      

效果如上第一个

2、渐变条纹背景剪贴蒙版

使用线性渐变设置一个七彩条纹的背景，然后设置背景裁剪为text和文字填充颜色为透明：

.bg-clip2{
         background:linear-gradient(         90deg,             red 0%,red 14.3%,             orange 0,orange 28.6%,             yellow 0,yellow 42.9%,             green 0,green 57.2%,             blue 0, blue 71.5%,             indigo 0,indigo 85.8%,             violet 0, violet 100%         );     background-repeat:no-repeat;     background-size: cover;     -webkit-background-clip: text;     background-clip: text;         -webkit-text-fill-color: transparent;     text-fill-color: transparent; }

      
       渐变背景文字剪贴蒙版
      

3、剪贴蒙版的动画效果

同上，首先设置一个渐变背景，但这里我们background-size宽度设为50%，最后在添加一个背景移动的动画：

.bg-clip3{
         background-image: linear-gradient(               45deg,                #ccc 0%, #ccc 30%,                #00B4F1 0%, #00B4F1 70%,                #ccc 0%, #ccc 100%);     background-size: 50% 100%;     -webkit-background-clip: text;     background-clip: text;     color:transparent;     background-position: 0% 50%;     animation: aitf 8s linear infinite; } @keyframes aitf {
         0% { background-position: 0% 50%; }     100% { background-position: 100% 50%; } }

      
       剪贴蒙版动画效果
      

二、text-shadow的应用

text-shadow有四个属性值

属性	值
h-shadow	水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值是
blur	可选。模糊的距离
color	可选。阴影的颜色

text-shadow属性可以向文本添加一个或多个阴影，我们可由此作出许多不同的有趣效果，以下仅为几个参考示例：

1、文字的投影效果

最基本的投影效果

.shadow1 {
         color: red;     text-shadow: 5px 5px 5px #000; }

2、文字的描边效果

对文字添加四个分别向上下左右位移为1px的红色投影，即可实现红色描边效果

.shadow2 {
         color: white;     text-shadow: -1px 0px 1px red, 1px 0px 1px red, 0px -1px 1px red, 0px 1px 1px red; }

3、文字的浮雕效果

对文字添加向左上偏移1px的黑色（暗）模糊值较小的投影，再分别添加向右和向下的蓝色（亮色）模糊值较大的投影，即可实现文字浮雕特效

.shadow3 {
         color: white;     text-shadow: -1px -1px 3px black, 0 0 5px blue, 0 0 8px blue; }

4、文字的剪纸效果

文字设为白色，添加向左1px的黑色投影，添加向右和向下的蓝色投影：

.shadow4 {
         color:  white;     text-shadow: 1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000; }

5、文字的发光效果

添加两层无偏移的白色投影

.shadow5 {
         color: blue;     background-color:#949191;     text-shadow: 0px 0px 3px white, 0px 0px 5px white; }

三、文字的排版

1、文字的环形排版

这里应用了svg路径实现，创建一个圆形的路径，在和元素写入文本，通过xlink:href属性把它链到我们的圆上，设置圆形填充为none,svg标签overflow为visib，参考如下：

      
                
       
                     
        
                      
         
                           
          
                                这是一个圆形文字效果w(ﾟДﾟ)w ~~~！！！                              
          
                       
        
       
      

.circlar path{      fill: none;  } .circlar{
         width: 300px;     height: 300px;     margin: 100px; } .circlar svg{
         display: block;     overflow: visible; }

2、自右向左的竖排文字

通过设置writing-mode的值内容块固有的书写方向

属性	值
vertical-rl	垂直的自右到左
vertical-lr	垂直的自左到右
sideways-rl	水平的自右到左
sideways-lr	水平的自左到右

示例：

.tbl{
         margin: 100px;     writing-mode:vertical-rl; } .tbl>span::after{
         content: '\A';     white-space: pre; }

      
                
       何日归家洗客袍？         
       银字笙调，心字香烧。         
       流光容易把人抛，红了樱桃，绿了芭蕉。     
      

3、换行

最后安利一种文字换行的方法，在上一的示例中已有使用:

在Unicode中有一个转义字符是等同于换行的：0x000A。在CSS中，可以写成"\000A"，或"\A",通过伪类加入标签，即可实现各个标签的换行，如上示例中为没一句诗的span元素添加换行；

---