# css中文本阴影特效
# 快速导航
# 示例效果
# 文字颜色渐变
两岸猿声啼不住
轻舟已过万重山。
轻舟已过万重山。
.text-clip{
color:transparent;
font-size: 40px;
font-weight: bold;
background: linear-gradient(45deg, rgba(0,173,181,1) 0%, rgba(0,173,181,.4) 100%);
-webkit-background-clip: text;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
TIP
利用的是 -webkit-background-clip: text 属性，也可以将背景颜色设置为背景图
# 文字模糊
人生得意须尽欢,莫使金樽空对月？
.text-blurry{
text-align: center;
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
1
2
3
4
5
2
3
4
5
# 空心文字
大漠孤烟直,长河落日圆
.hollow-text {
color: #fff;
text-shadow: 0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 文字外发光
长风破浪会有时,直挂云帆济沧海
.glow-text{
line-height:60px;
background: #00adb5;
color:#fff;
text-align: center;
text-shadow: 0 0 0.1em, 0 0 0.3em;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 文字阴影
仰天长笑出门去,我辈岂是蓬蒿人?
.text-shadow{
color:#00adb5;
text-shadow: 1px 1px rgba(0,173,181,.2882),
2px 2px rgba(0,173,181,.2882),
3px 3px rgba(0,173,181,.2882),
4px 4px rgba(0,173,181,.2882);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
← css实现手风琴效果 css字体旋转动效 →
