文本阴影 | 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) | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com