text-shadow
text-shadow CSS 属性为文本添加阴影。它接受一个逗号分隔的阴影列表，这些阴影将应用于文本及其任何装饰。每个阴影都由元素相对于X和Y的偏移量、模糊半径和颜色的某种组合来描述。
试一试
text-shadow: 1px 1px 2px pink;
text-shadow: #ffcc00 1px 0 10px;
text-shadow: 5px 5px #558abb;
text-shadow: red 2px 5px;
text-shadow: 5px 10px;
text-shadow:
1px 1px 2px red,
0 0 1em blue,
0 0 0.2em blue;
<section id="default-example">
<p id="example-element">
Far out in the uncharted backwaters of the unfashionable end of the western
spiral arm of the Galaxy...
</p>
</section>
p {
font:
1.5em "Georgia",
serif;
}
语法
css
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #ffcc00 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: revert;
text-shadow: revert-layer;
text-shadow: unset;
此属性指定为一个逗号分隔的阴影列表。
每个阴影都指定为两个或三个<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 |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 一种颜色加上三个绝对长度 |
| 动画类型 | 一个阴影列表 |
正式语法
text-shadow =
none |
<shadow>#
<shadow> =
<color>? &&
[ <length>{2} [ <length [0,∞]> <length>? ]? ] &&
inset?
示例
基本阴影
css
.red-text-shadow {
text-shadow: red 0 -2px;
}
html
<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>
多个阴影
css
.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;
}
html
<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>
规范
| 规范 |
|---|
| CSS 文本装饰模块级别 3 # text-shadow-property |
浏览器兼容性
加载中…