css3 text-shadow的使用
text-shadow
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默认值：none
适用于：所有元素
继承性：有
动画性：是
计算值：1个颜色加3个绝对长度
取值：
- none：
- 无阴影
- <length>①：
- 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- <length>②：
- 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- <length>③：
- 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- <color>：
- 设置对象的阴影的颜色。
-
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-shadow_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test li{margin-top:10px;} .test .mormal p{text-shadow:1px 1px rgba(0,0,0,.3);} .test .blur p{text-shadow:1px 1px 1px rgba(0,0,0,.3);} .test .group p{text-shadow:1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8);} </style> </head> <body> <ul class="test"> <li class="mormal"> <strong>普通文字阴影</strong> <p>测试普通文字阴影效果</p> </li> <li class="blur"> <strong>模糊文字阴影效果</strong> <p>测试模糊文字阴影效果</p> </li> <li class="group"> <strong>多重模糊文字阴影效果</strong> <p>测试多重模糊文字阴影效果</p> </li> </ul> </body> </html>
text-shadow_CSS参考手册_web前端开发参考手册系列
- 普通文字阴影
测试普通文字阴影效果
- 模糊文字阴影效果
测试模糊文字阴影效果
- 多重模糊文字阴影效果
测试多重模糊文字阴影效果
