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前端开发参考手册系列

  • 普通文字阴影

    测试普通文字阴影效果

  • 模糊文字阴影效果

    测试模糊文字阴影效果

  • 多重模糊文字阴影效果

    测试多重模糊文字阴影效果

posted @ 2015-11-04 16:26  大饼怪  阅读(454)  评论(0)  编辑  收藏  举报