您尚未登录,无法添加相关文章。 - 登录

新用户?

哎呀,出了点小问题,您可以稍后重试!

未填写内容或格式不正确!

CSS3 text-shadow使用参考指南

浏览:22088

相关技术文章博览

我要添加++

基础知识(取自腾讯ISD Webteam CSS3中文手册)

语法:

text-shadownone | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

相关属性 : 无

取值:
<color>
指定颜色。
<length>
由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity>
由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow 。

兼容性:
类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (×)Firefox 3.0.10 (√)Chrome 2.0.x (√)Opera 9.64 (√)Safari 4
(×)IE7 (√)Firefox 3.5
(×)IE8
 

代码与实例

CSS代码:
.text_shadow{
    width:200px; 
    padding:40px 20px; 
    background:#a0b3d6; 
    text-shadow:2px 2px 1px white;
}
                
HTML代码:
<div class="text_shadow">文字的阴影效果!</div>
                
效果截图
CSS3 text-shadow效果截图
查看demo原页面>>

拓展知识点(由各前端同仁提供)

知识点(1) 提供者:张鑫旭 最后编辑:张鑫旭[编辑本段]
如果给文字阴影添加模糊半径,可能会导致页面在滚动时速度变慢。 如果给文字阴影添加模糊半径,可能会导致页面在滚动时速度变慢。
对下面的内容进行修改编辑:
知识点(2) 提供者:Nero 最后编辑:张鑫旭[编辑本段]
text-shadow在CSS2中定义,CSS2.1中没有保留。 text-shadow在CSS2中定义,CSS2.1中没有保留。
对下面的内容进行修改编辑:
图片地址是:取消
插入:

我要分享

分享到:1