css3 text-shadow
2015-06-01 21:05
591 查看
一、text-shadow
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平阴影 垂直阴影 模糊半径 color;
h-shadow和v-shadow可取负值,blur只能取正值。
二、使用
1、基础
<style type="text/css"> .blur{ text-shadow:0 0 5px red;/*阴影无偏移*/ } .vh{ text-shadow:1px 1px 0 red; /*阴影偏移1px 1px*/ } .white{ color: white; text-shadow:2px 2px 4px black; } </style> <body> <h1 class="blur">霓虹灯效果的文本阴影</h1> <h1 class="vh">文本水平垂直阴影效果</h1> <h1 class="white">白色文本阴影效果</h1> </body>
![](http://images0.cnblogs.com/blog2015/315302/201506/011607580663571.png)
2、浮雕效果
使用浮雕效果,模糊值必须设为0来增加质感。<style type="text/css"> .relief{ color: #ccc; text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444; } </style> <body> <h1 class="relief">浮雕效果</h1> </body>
![](http://images0.cnblogs.com/blog2015/315302/201506/011713304103124.png)
3、模糊效果
使用text-shadow制作模糊效果注意一点:把文本的前景色设置为透明,即transparent,模糊值越大效果越模糊。<style type="text/css"> .relief{ /* color: #ccc;*/ color: transparent; text-shadow: 0 0 5px #f96; } </style> <body> <h1 class="relief">模糊效果</h1> </body>
![](http://images0.cnblogs.com/blog2015/315302/201506/011718265825372.png)
4、内凹效果
注意:文字的前景色要比背景色暗,阴影颜色稍微比背景色亮一点点,这一步很重要,如果阴影颜色太亮会看起来很怪,如果太暗又没有效果。inset效果是文本的影子效果,也是一种常见的效果,给人一种微妙的突出效果。
<style type="text/css"> .inset{ color: #566F89; background: #C5DFF8; text-shadow: 1px 1px 0 #E4F1FF; } </style> <body> <h1 class="inset">内凹效果</h1> </body>
![](http://images0.cnblogs.com/blog2015/315302/201506/011725419576081.png)
5、描边效果
原理:使用两个阴影,一个左上,一个右下,且不用模糊值。<style type="text/css"> .stroke{ background-color: #666666; color: #fff; text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96; } </style> <body> <h1 class="stroke">描边效果</h1> </body>
![](http://images0.cnblogs.com/blog2015/315302/201506/011727589573669.png)
6、3d效果
3D文字效果运用原理就是像Photoshop一样,我们在文字的下方或上方复制了多个图层,并把每一个层向左上或右下方向移动一个1px距离,从而制作 出3D效果。同时我们层数越多,其越厚重。换成用text-shadow制作就是使用多个阴影,并把阴影色设置相同,给其使用rgba色效果更佳。<style type="text/css"> .threeD { background-color: #666666; color: #fff; 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); } </style> <body> <h1 class="threeD">3D效果</h1> </body>
![](http://images0.cnblogs.com/blog2015/315302/201506/011732046608466.png)
三、资源链接
http://www.cnblogs.com/lhb25/archive/2013/01/31/css3-text-shadow.htmlhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
相关文章推荐
- 父窗口采用js控制iframe页面样式
- Html-Css-设置DIV边框圆滑
- 关于更改ListBox的ItemsPanel样式
- CSS: Float a div on another div, Ex: Text caption on picture
- css3 animation实现风车转动
- css绘制三角形方法
- 表格样式
- CSS3 transition transform
- CSS 背景图随div大小缩放 兼容IE
- CSS 判断IE并执行样式
- CSS + ul li 横向排列的方法
- 关于CSS布局的一些经验
- 10_css控制背景与css精灵.txt
- 6_css选择符详解.txt
- 5_css控制文字及链接.txt
- 4_css语法及优先权.txt
- 3_css语法.txt
- 2_css理解.txt
- 图文详解CSS的position常用的三个属性:relative,absolute以及fixed,以及嵌套使用的一个常见情况
- 25_css缩放zoom.html