CSS3实战1-文本属性text-shadow的用法

text-shadow

定义文本阴影或模糊效果。

text-shadow

属性在css2中已经定义了，但是在css3中又重新定义了，并且增加了不透明度的效果。

基本语法

text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?

默认值：无

适用于：所有元素

动画性：是，除了内、外阴影切换时

计算值：指定值

取值：

none

： 无阴影

<length>

①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值

<length>

②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

<length>

③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

<length>

④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值

<color>

： 设置对象的阴影的颜色。

inset

： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

Demo和Demo源码

Demo地址：http://weber.pub/demo/160925/text-shadow.html

Demo源码：http://pan.baidu.com/s/1sl0A5pr 密码：a0qh

解释

先上代码

<style>
p{
font-size: 50px;
font-weight: 900;
}
.p1{
text-shadow: 3px 3px red;
}
.p2{
text-shadow: 3px 3px 5px red;
}
</style>

<p class="p1">weber.pub</p>
<p class="p2">weber.pub</p>

从上面的例子中可以看出 text-shadow 属性的第一个值表示水平位移，第二个表示垂直位移，第三个表示模糊半径（可选），第四个表示阴影颜色（可选）

实例

1、复杂文本特效

实现一个文本的多重阴影效果

<style>
.p3{
text-shadow: 3px 3px 5px #17bebb,
15px 15px 5px #a8be11,
27px 27px 5px #be1411;
}
</style>
<p class="p3">weber.pub</p>

效果图如下



2、静态火焰效果

根据不同的偏离值模糊程度，再加上我们设定合适的颜色值，就可以利用

text-shadow

来做出类似火焰的效果。

<style>
.p4{
background: #000000;
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
<p class="p4">weber.pub</p>

3、会动的火焰效果

根据css3的动画然后让text-shadow属性变化来实现的效果（css样式只展示在 chrome 浏览器的，兼容其他浏览器的css样式，可下载源码）

<style>
.p5{
background: #000000;
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
animation: ts 3s;
-moz-animation: ts 3s;
-webkit-animation: ts 3s;
-o-animation: ts 3s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes ts{
0% {
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
40% {
text-shadow: 0 0 5px #fff,
0 -8px 8px #ff3,
2px -15px 10px #fd3,
-4px -20px 15px #f80,
2px -30px 22px #f20;
}
50% {
text-shadow: 0 0 5px #fff,
0 -8px 8px #ff3,
4px -15px 10px #fd3,
-2px -20px 15px #f80,
4px -30px 22px #f20;
}
60% {
text-shadow: 0 0 5px #fff,
0 -8px 8px #ff3,
-2px -15px 10px #fd3,
-2px -20px 15px #f80,
-2px -30px 22px #f20;
}
100% {
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
}
<style>
<p class="p5">weber.pub</p>

暂时没有找到好用的可以制作gif图片的工具，所以就没有图片了，求推荐。。。

4、凸出立体文本效果

通过在文本的左上角和右下角各添加一个像素的错位补色阴影，可以实现一种立体效果。

<style>
.p6{
color: #17bebb;
background: #17bebb;
text-shadow: -1px -1px #fff,
1px 1px #333;
}
</style>
<p class="p6">weber.pub</p>

5、内凹立体文本效果

和上面的案例原理相同

<style>
.p7{
color: #ccc;
background: #ccc;
text-shadow: 1px 1px #fff,
-1px -1px #333;
}
</style>
<p class="p7">weber.pub</p>

6、文本描边效果

分别对文本的4个边添加1像素的实体阴影

<style>
.p8{
color:#fff;
text-shadow: -1px 0 #17bebb,
0 1px #17bebb,
1px 0 #17bebb,
0 -1px #17bebb;
}
</style>
<p class="p8">weber.pub</p>

7、文本外发光效果

<style>
.p9{
text-shadow: 0 0 5px red,
0 0 5px #291717;
}
</style>
<p class="p9">weber.pub</p>

by web开发者 from http://weber.pub/

本文地址： http://weber.pub/css3实战1-文本属性text-shadow的用法/220.html