css⽂字效果（⽂字剪贴蒙版，text-shodow的应⽤，⽂字排版
等…）
原⽂:
记录⼏种常见的⽂字效果
⼀、⽂字剪贴蒙版
在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;
}
<div class="div bg-clip">图⽚背景⽂字剪贴蒙版</div>
效果如上第⼀个
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;css特效文字
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
<div class="div bg-clip2">渐变背景⽂字剪贴蒙版</div>
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%; }
}
<div class="div bg-clip3">剪贴蒙版动画效果</div>
⼆、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，参考如下：
<div class="circlar">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>
<text>
<textPath xlink:href="#circle">
这是⼀个圆形⽂字效果w( Д )w ~~~
</textPath>
</text>
</svg>
</div>
.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;
}
<div class="tbl">
<span>何⽇归家洗客袍？</span>
<span>银字笙调，⼼字⾹烧。</span>
<span>流光容易把⼈抛，红了樱桃，绿了芭蕉。</span>
</div>
3、换⾏
最后安利⼀种⽂字换⾏的⽅法，在上⼀的⽰例中已有使⽤:
在Unicode中有⼀个转义字符是等同于换⾏的：0x000A。在CSS中，可以写成"\000A"，或"\A"，通过伪类加⼊标签，即可实现各个标签的换⾏，如上⽰例中为没⼀句诗的span元素添加换⾏；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。