CSS参考手册
文字装饰 | Text Decoration
文本阴影 | text-shadow
该text-shadow
CSS属性向文本添加阴影。它接受一个以逗号分隔的阴影列表,应用于文本和text-decorations
元素。
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #FC0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
Initial value |
none |
---|---|
Applies to |
all elements. It also applies to ::first-letter and ::first-line. |
Inherited |
yes |
Media |
visual |
Computed value |
a color plus three absolute lengths |
Animation type |
a shadow list |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
语法
该属性的值为逗号分隔的阴影列表。
每个阴影被指定为两个或三个<length>
值,每个<length>
值后可以选择性地加上一个<color>
值。前两个<length>
值是<offset-x>
和<offset-y>
值。第三,可选的<length>
值是<blur-radius>
。<color>属性
的值是阴影的颜色。
当给出多个阴影时,阴影按定义顺序从前往后应用,最先指定的阴影在最上方。
此属性同时适用于::first-line
和::first-letter
伪元素...
可能值
<color>
——可选。阴影的颜色。它可以在偏移值之前或之后指定。如果未指定,颜色的值就留给用户代理指定,所以当需要保证跨浏览器的一致性时,应该明确地定义它。
<offset-x> <offset-y>
——必须。这些<length>
值指定了阴影与文本的距离。
<offset-x>
——指定水平距离; 如果为负值,则表示将阴影放在文本的左侧。
<offset-y>
——指定垂直距离; 如果为负值,则表示将阴影置于文本上方。如果两个值都是0
,则阴影直接放置在文本的后面,虽然它可能由于<blur-radius>
的效果而部分可见。
<blur-radius>
——可选。这是一个<length>
值。值越大,模糊程度越大, 阴影变得越宽。如果未指定,则默认为0
。
形式语法
none | <shadow-t>#where
<shadow-t> = [ <length>{2,3} && <color>? ]
where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
实例
简单阴影
.red-text-shadow {
text-shadow: red 0 -2px;
}
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
多重阴影
.white-text-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, serif;
}
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
规范
Specification |
Status |
Comment |
---|---|---|
CSS TransitionsThe definition of 'text-shadow' in that specification. |
Working Draft |
Specifies text-shadow as animatable. |
CSS Text Decoration Module Level 3The definition of 'text-shadow' in that specification. |
Candidate Recommendation |
The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to CSS Text Decoration Module Level 3. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
2.0 |
(Yes) |
3.5 (1.9.1)1 |
103 |
9.52 |
1.1 (100)4 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
? |
? |
? |
? |
文字装饰 | Text Decoration相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。