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 |
瀏覽器相容性
載入中…