HTML5学堂-码匠 HTML5学堂

您当前位于:移动端开发 ——> CSS3文本阴影 text-shadow

CSS3文本阴影 text-shadow

2015/05/28 01:04:13 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词: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学堂 CSS3阴影  H5course

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

欢迎沟通交流~HTML5学堂

 

结构代码:

 

  1. <div class="h5course">欢迎沟通交流~HTML5学堂</div>

描边:

样式代码:

  1.         html {
  2.             background: #000;
  3.         }
  4.         .h5course {
  5.             width: 400px;
  6.             height: 200px;
  7.             text-shadow: 1px 1px 0 #f96,
  8.                          -1px -1px 0 #f96; 
  9.             background: #ccc;
  10.             line-height: 200px;
  11.             text-align: center;
  12.             font-size: 30px;
  13.             font-family: "微软雅黑";
  14.  
  15.         }

看效果图:

HTML5学堂 CSS3阴影  H5course

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

欢迎沟通交流~HTML5学堂

外发光

样式代码:

  1. html {
  2.             background: #000;
  3.         }
  4.         .h5course {
  5.             width: 500px;
  6.             padding: 30px;
  7.             background: #333;
  8.             color: #000;
  9.             text-shadow: 0 0 20px #fff, 
  10.                          0 0 50px #00f; 
  11.             font-size: 40px;
  12.             font-weight: bold;
  13.             font-family: "微软雅黑";
  14.         }

HTML5学堂 CSS3阴影  H5course

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

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

样式代码:

  1. .h5course {
  2.             width: 500px;
  3.             padding: 30px;
  4.             background: #333;
  5.             text-shadow: 0 1px 1px #fff;  
  6.             color: #000;
  7.             font-size: 40px;
  8.             font-weight: bold;
  9.             font-family: "微软雅黑";
  10.         }

查看效果:

HTML5学堂 CSS3阴影  H5course

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

立体文字

样式代码:

  1. .h5course {
  2.             width: 500px;
  3.             padding: 30px;
  4.             background: #333;
  5.             color: #000;
  6.             text-shadow: 1px 1px rgba(197, 223, 248,0.8),
  7.                          2px 2px rgba(197, 223, 248,0.8),
  8.                          3px 3px rgba(197, 223, 248,0.8),
  9.                          4px 4px rgba(197, 223, 248,0.8);
  10.             font-size: 40px;
  11.             font-weight: bold;
  12.             font-family: "微软雅黑";
  13.         }

查看效果:

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

兼容性:

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端