“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第6天，点击查看活动详情”
一、两种颜色的文字
效果如下：
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不同颜色文字</title>
<style>
.txtBox{
font-size: 75px;
color:#438af5;
text-align: center;
}
.txt{
height:60px;
position:absolute;
overflow:hidden;
color:#019209;
}
</style>
</head>
<body>
<div class="txtBox">
<span class="txt">前端搬砖工</span>前端搬砖工
</div>
</body>
</html>
css知识点： 其实这个效果是个障眼法，需要定义两组文字，将一组设置为绿色，将内另一组设置为蓝色，并将两组文字进行叠加，实现叠加的效果需要将内层标签的position属性值定义为absolute。另外，将一组标签设置为指定高度，并通过overflow:hidden隐藏超出指定高度部分的内容。
二、实现线性渐变的文字
效果如下：
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字线性渐变</title>
<style>
.content{
margin-top: 30px;
font-size: 64px;
text-align: center;
background:-webkit-linear-gradient(45deg, #00c3ff, #6f00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="content">
像我这样帅的人
</div>
</body>
</html>
css知识点： 上图效果主要使用了 CSS3 中的 linear-gradient() 函数创建一个线性渐变的图像，background-clip背景被裁剪到文字，-webkit-text-fill-color: transparent设置文字的填充颜色。
示例：
background:linear-gradient(direction, color1, color2)
direction是设置渐变的方向（例如top），可以使用角度值（deg，例如45deg）
color1, color2指定渐变的起止颜色。
三、镂空文字
效果如下：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>镂空文字</title>
<style type="text/css">
body{
text-align:center;
}
div{
font-size:60px;
font-weight:bolder;
-webkit-text-stroke:1px #ff0000;
-webkit-text-fill-color:transparent;
}
</style>
</head>
<body>
<div>前端搬砖工</div>
</body>
</html>
css知识点： 使用CSS3中的text-stroke属性，通过该属性可以设置文字的描边效果，该属性有两个参数（width、color）描边宽度，描边颜色。
四、图案填充文字
效果如下：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图案填充效果</title>
<style type="text/css">
body{
text-align:center;
}
div{
margin:20px;
font-size:64px;
font-weight:bolder;
background-image:url("../css-ikun/images/cxk.gif");
background-size: 100% 100%;
-webkit-background-clip:text;
-webkit-text-stroke:1px #0000FF;
-webkit-text-fill-color:transparent;
}
</style>
</head>
<body>
<div>前端搬砖工，优质打工人</div>
</body>
</html>
css知识点： 实现文字的镂空效果，通过设置元素的背景图像实现文字的图案填充效果。需要设置背景图background-image，然后配合text-stroke文字描边效果，背景图可以是动图，我上述的示例就是动图，小黑子应该能看得出来是谁吧？嘿嘿嘿。
五、垂直显示文本
效果如下：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直显示文本</title>
<style type="text/css">
div{
width:450px;
margin:10px auto;
padding:30px;
background:#c6dfe7;
font-size: 28px;
color:#8f918f;
text-align: center;
border:1px solid #CCCCCC;
box-shadow:3px 3px 6px #999999;
writing-mode:vertical-rl;
letter-spacing: 2px;
}
h4{
font-size: 28px;
letter-spacing: 2px;
}
span{
font-size: 20px;
letter-spacing: 4px;
}
</style>
</head>
<body>
<div>
<h4>《草》<span>唐·白居易</span> </h4>
<p>
离离原上草，<br>
一岁一枯荣。<br>
野火烧不尽，<br>
春风吹又生。<br>
远芳侵古道。<br>
晴翠接荒城。<br>
又送王孙去，<br>
萋萋满别情。
</p>
</div>
</body>
</html>
css知识点： 实现以垂直方式从右向左显示文本主要使用了CSS中的writing-mode属性。该属性定义了文本在水平或垂直方向上如何排布。该属性主要有3个属性值，各个属性值的说明如下所示。horizontal-tb：默认值，表示水平方向从上到下的书写方式。vertical-rl：表示垂直方向从右向左的书写方式。vertical-lr：表示垂直方向从左向右的书写方式。
—— END ——
