48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
|
---
|
|||
|
|
title: Text Shadow
|
|||
|
|
localeTitle: 文字阴影
|
|||
|
|
---
|
|||
|
|
## 文字阴影
|
|||
|
|
|
|||
|
|
`text-shadow`属性为文本添加阴影。 \`\`\`CSS text-shadow：offset-x offset-y blur-radius color;
|
|||
|
|
```
|
|||
|
|
### offset-x
|
|||
|
|
|
|||
|
|
Sets the horizontal distance from the text. Accepts both positive and negative values. Positive values place shadow to the right of the text while a negative value places the shadow to the left.
|
|||
|
|
|
|||
|
|
The `offset-x` value is required.
|
|||
|
|
|
|||
|
|
### offset-y
|
|||
|
|
|
|||
|
|
Sets the vertical distance from the text. Accepts both positive and negative values. Positive values place shadow to below the text while a negative value places the shadow above.
|
|||
|
|
|
|||
|
|
The `offset-y` value is required.
|
|||
|
|
|
|||
|
|
|
|||
|
|
### blur-radius
|
|||
|
|
|
|||
|
|
Sets the length of the shadow's blur. The larger the value the wider and lighter the shadow becomes.
|
|||
|
|
|
|||
|
|
The `blur-radius` value is optional.
|
|||
|
|
|
|||
|
|
### color
|
|||
|
|
|
|||
|
|
Sets the color of the shadow.
|
|||
|
|
|
|||
|
|
The `color` value is optional.
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Example
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
CSS text-shadow：1px -2px 5px＃a4a4a4;
|
|||
|
|
```
|
|||
|
|
### Example of multiple shadows
|
|||
|
|
Multiple shadows can be used for giving text a solid outline on all 4 directions, like a bubble-writing effect.
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
CSS text-shadow：-1px 0 1px black，0 1px 1px black，1px 0 1px black，0 -1px 1px black; \`\`\`
|
|||
|
|
|
|||
|
|
### 更多信息：
|
|||
|
|
|
|||
|
|
MDN文档： [MDN Web Docs - CSS文本阴影](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
|