h5 input 阴影_CSS3文本阴影 text-shadow

CSS3文本阴影 text-shadow

HTML5学堂：CSS3文本阴影是给文本添加阴影效果，而在CSS3文本阴影在CSS以及存在了，只是CSS2.1的时候不用了，但是在CSS3又重新使用了，这是因为前端开发者对文本阴影开始重视了，使用更加广泛了！而本章对CSS3文本阴影的讲解希望对大家有帮助！谢谢~~

CSS3阴影的种类

可以分文字阴影和盒模型阴影。在最早做网页的时候，阴影效果是没办法实现的，只能用图片代替，现在有了CSS3的阴影属性box-shadow以及text-shadow来实现阴影。这样我们可以不需要图片也可以实现阴影效果了，一方面能减少代码以及图片的大小和数量，另一方面我们也能减少对图片的请求。还有一点，在于阴影能够很好的处理我们当前移动端上的一些问题。今天我们就来一起先看看文本阴影

欢迎沟通交流~HTML5学堂

文本阴影

text-shadow基本语法

text-shadow：none|shadow[,shadow]*

shadow=length{2,3}&&color?

默认值：none

语法分析：

none：无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

color：设置对象的阴影的颜色。可以使用16进制颜色值，也可以使用英文单词，还可以采用rgba的表示法。

语法符号含义：

“[]”代表“可选”

“|”代表“或”

“{}”里的数字代表属性值的数量范围

“？”代表“一次”

“*”表示可出现多次

CSS3文本阴影 应用

我们可以通过文本阴影实现“外发光”“火焰”“内陷”“立体”“镂空”等各种效果。接下来我们就来举几个例子，实战一下~

欢迎沟通交流~HTML5学堂

结构代码：

欢迎沟通交流~HTML5学堂

描边：

样式代码：

html {

background: #000;

}

.h5course {

width: 400px;

height: 200px;

text-shadow: 1px 1px 0 #f96,

-1px -1px 0 #f96;

background: #ccc;

line-height: 200px;

text-align: center;

font-size: 30px;

font-family: "微软雅黑";

}

看效果图：

描边效果有时还是可以试用达到一种特殊的描边效果，其主要运用两个阴影，第一个向左上投影，而第二向右下投影，还需注意，制作描边的阴影效果我们不使用模糊值。

欢迎沟通交流~HTML5学堂

外发光

样式代码：

html {

background: #000;

}

.h5course {

width: 500px;

padding: 30px;

background: #333;

color: #000;

text-shadow: 0 0 20px #fff,

0 0 50px #00f;

font-size: 40px;

font-weight: bold;

font-family: "微软雅黑";

}

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

内陷文本/文本内阴影特效

样式代码：

.h5course {

width: 500px;

padding: 30px;

background: #333;

text-shadow: 0 1px 1px #fff;

color: #000;

font-size: 40px;

font-weight: bold;

font-family: "微软雅黑";

}

查看效果：

内阴影的效果主要是运用文字颜色与背景颜色之间产生内陷的感觉，这里一定要注意。模糊度一定要设置为0，否则没有质感了。同样我们可以改变不同的投光角度，从而制作不同效果。大家可以试试~

立体文字

样式代码：

.h5course {

width: 500px;

padding: 30px;

background: #333;

color: #000;

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);

font-size: 40px;

font-weight: bold;

font-family: "微软雅黑";

}

查看效果：

实现立体文字的效果，需要使用多重阴影，向着同一个方向，进行叠加。需要注意的是，不同阴影之间，使用逗号分隔。另外，对于阴影，不建议采用模糊值，如果设置了模糊值，会导致立体感不足。

兼容性:

IE8以及IE8以下版本浏览器不支持

欢迎沟通交流~HTML5学堂