css3

关注公众号 jb51net

关闭
网页制作 > CSS > css3 >

用CSS3将你的设计带入下个高度

脚本之家


6. 文字阴影
尽管在CSS2中就已经存在,text-shadow是一个未被广泛应用的CSS属性。但是它将在CSS3中被广泛采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。
尽管这样,你需要确认,你的设计中的文字是可读的,以防用户的浏览器不支持CSS3高级属性。给文字和背景色彩足够的对比度以防text-shadow 属性不能被浏览器正确渲染或理解。
css3-文字阴影
Beakapp 在它的网站中使用了text-shadow 属性:内容区域.
BeakApp.com 为内容区域使用了text-shadow 属性,为文字添加深度和维度 并让它变得醒目——而不是使用某种图片替换技术。该属性目前只在Safari和Chrome中可用。
该网站的主菜单使用的CSS如下:
.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

这里我们使用阴影颜色(使用了RGBA,前面有描述), 然后是右(x 坐标) 和底部(y 坐标) 偏移,最后是模糊半径
如果要在一个文字上使用多阴影,可以使用逗号分开。比如:
p {
text-shadow: red 4px 4px 2px,
yellow -4px -4px 2px,
green -4px 4px 2px;
}

浏览器支持: Webkit核心浏览器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它,Firefox 将在即将发行的3.5版本中支持。 扩展阅读: Text Shadows: the ‘text-shadow’ property — W3C Working Draft Text shadows: Web Style Sheets CSS tips and tricks Text-shadow, Photoshop like effects using CSS — CSS3.info Make Cool And Clever Text Effects With CSS Text-Shadow Safari’s Text-Shadow Anti-Aliasing CSS Hack text-shadow text-shadow: Mozilla Developer Center