视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS3阴影(text-shadow)_html/css
2020-11-27 16:34:23 责编:小采
文档

在以前,阴影效果一般都是做成图片,现在有了CSS3 可以直接使用text-shadow 属性来实现阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不需要图片的情况下就能给文字增加质感。

基本语法:

text-shadow : none |  none | [, ] *  或none |  [,  ]*也就是:text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...或者text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...

取值范围:

: 长度值,可以是负值。用来指定阴影的延伸距离。其中X offset是水平偏移值,Y Offset是垂直偏移值。

: 指定阴影颜色,也可以是 rgba透明色

: 阴影的模糊值,不可以是负值,用来指定模糊效果的作用距离。

如下图所示:

简单说明:

可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color 中X-Offset 表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移; Y-Offset 是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰。如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色。

.demo { background: #666666; width: 440px; padding:30px; font: bold 55px/100% "微软雅黑", "Lucida Grande", Arial, Sans; color: #fff; text-transform: uppercase; }

接下来我们在每个Demo上加上自己特定的样式,分别如下所示:

.demo1{ text-shadow: red 0 1px 0;}

效果一: Glow and Extra Glow effect (也就是 NEON effect)

.demo1{text-shadow: 0 0 20px red;}

辉光效果,我们设置比较大的模糊半径来增强其辉光效果,你可以改变不同的模糊半径来达到不同的效果,当然你也可以同时增加几个不同的半径值,创造多种不同的阴影效果。就如下面的NEON效果。

.demo1{text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;}

效果二:Stroke text effect

.demo1{text-shadow: 1px 1px 0 #f96, -1px -1px 0 #f96;}

描边效果跟我们在Photoshop相比,效果差很多,出现断点,但有时还是可以使用达到一种特殊的描边效果,其主要运用两个阴影,第一个向左上投影,而第二向右下投影,还需注意,制作描边的阴影效果不适用模糊值。

效果三: 3D text effect

.demo1 { text-shadow: 1px 1px rgba(197, 223, 248,0.8), 2px 2px rgba(197, 223, 248,0.8), 3px 3px rgba(197, 223, 248,0.8), 4px 4px rgba(197, 223, 248,0.8), 5px 5px rgba(197, 223, 248,0.8), 6px 6px rgba(197, 223, 248,0.8); }
.demo1{ text-shadow: -1px -1px rgba(197, 223, 248,0.8), -2px -2px rgba(197, 223, 248,0.8), -3px -3px rgba(197, 223, 248,0.8), -4px -4px rgba(197, 223, 248,0.8), -5px -5px rgba(197, 223, 248,0.8), -6px -6px rgba(197, 223, 248,0.8);}

3D文字效果运用原理就是想Photoshop一样,我们在文字的下方或者上方复制了多个图层,并把每一个层向左上或右下方向移动一个1px距离,从而制作出3D效果。同时我们层数越多,其越厚重。换成用text-shadow 制作就是使用多个阴影,并把阴影色设置相同,给其使用rgba色效果更佳,如上面的实例。

使用text-shadow还可以设置出来很多的效果,在此不再一一叙述:详情请参考下面的链接:

下载本文
显示全文
专题