一、字体渐变
-webkit-background-clip:text;
和 background-clip:text;
是关键属性,将背景只应用到文本的形状上。
注意:把当前元素设置为行内块,以便能够应用背景
效果图例
HTML
<div class="text-gradient">这是一段测试文字</div>
CSS
.text-gradient {
color: transparent;
background-image: linear-gradient(45deg, blue, red);
-webkit-background-clip: text;
background-clip: text;
display: inline-block;
}
二、文字描边(空心字体)
方法一、使用-webkit-text-stroke
实现
-webkit-text-stroke
是一个非标准但被部分浏览器支持的属性,用于直接给文本添加描边效果。
- 首先指定描边的宽度(例如
2px
),接着是描边的颜色(例如 black
)
效果图例
HTML
<p class="text-stroke">这是一段测试文字,This is a test text</p>
CSS
.text-stroke {
-webkit-text-stroke: 2px red;
color: aqua;
font-size: 60px;
}
方法二、使用text-shadow
实现
- 根据需要调整
阴影数量、偏移量和模糊半径
来模拟不同粗细的描边
- 使用
text-shadow
复合阴影模拟描边效果
- 每一组阴影由偏移量(x偏移、y偏移)、模糊半径(可设为0表示无模糊)和颜色组成
效果图例
HTML
<p class="text-shadow">这是一段测试文字,This is a test text</p>
CSS
.text-shadow {
color: white;
font-size: 30px;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
二、文字倒影
方法一、 使用-webkit-box-reflect
属性为文本添加倒影效果
- 使用-webkit-box-reflect属性为文本添加倒影效果(仅在支持WebKit内核的浏览器如Chrome、Safari中生效)
效果图例
HTML
<p class="text-reflection">这是一段测试文字</p>
CSS
.text-reflection {
font-size: 60px;
-webkit-box-reflect: below -10px -webkit-linear-gradient(transparent, transparent 5%, rgba(255, 255, 255, .3));
}
方法二、使用伪元素(不推荐)
- 通过
data-text
属性存储文本内容,动态地将文本传递给伪元素
- 创建一个伪元素,并设置
content: attr(data-text);
来显示与原文字相同的内容
transform: translateY(100%) rotateX(180deg);
,将伪元素向下移动到原文字下方,并水平翻转以模拟倒影
- 调整伪元素的颜色为半透明黑色
color: rgba(0, 0, 0, 0.5);
,模仿真实倒影的视觉效果
- 继承原文字的
font-size
和 font-family
样式,同时通过 white-space: pre;
保留文本中的空格和换行符。
效果图例
HTML
<p class="text-reflection" data-text="这是一段测试文字,This is a test text">这是一段测试文字,This is a test text</p>
CSS
.text-reflection {
font-size: 36px;
font-family: Arial, sans-serif;
position: relative;
color: black;
}
.text-reflection::after {
content: attr(data-text);
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(100%) rotateX(180deg);
filter: blur(1px);
color: rgba(0, 0, 0, 0.37);
background-color: transparent;
font-size: inherit;
font-family: inherit;
white-space: pre;
}