Welcome to Delicate template
Header
Just another WordPress site
Header

给文字添加阴影,css的text-shadow属性

12月 17th, 2010 | Posted by 无 名 in css

网页里给文字添加阴影,使用css的text-shadow属性,在火狐里面可以看到效果,在IE6里面看不到。
示例代码如下:

<style>
body {
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	/*font-style: italic; 斜体*/
	text-transform: uppercase;/*将英文字母转换为大写*/
	background: #6d6e66;
}
p.black {
	color: #000;
	text-shadow: rgba(100%, 100%, 100%, .5) 0px 1px;
}
p.white {
	color: #fff;
	text-shadow: rgba(0, 0, 0, .5) 0px 1px;
}
</style>
<p class="black">黑色,black</p>
<p class="white">白色,white</p>

text-shadow解释:
rgba(100%, 100%, 100%, .5) 阴影rgb颜色,透明度(白色,半透明)
0px 1px x轴不偏移,y轴偏移一个像素
最后还有一个参数,是阴影扩散量(px)

You can follow any responses to this entry through the RSS 2.0 Both comments and pings are currently closed.