box-shadow和text-shadow
325 字
2 分钟
box-shadow和text-shadow
box-shadow 属性向框添加一个或多个阴影
语法
CSS语法
box-shadow: h-shadow v-shadow blur spread color inset;注释
box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是 0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
box-shadow: 10px 20px 30px 40px #000 inset;JavaScript语法
object.style.boxShadow="10px 10px 5px #888888"text-shadow
语法
CSS语法
text-shadow: h-shadow v-shadow blur color;注释
text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
text-shadow: 10px 20px 30px #000;支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
box-shadow和text-shadow
https://gaodaxiu-blog.netlify.app/posts/box-shadow和text-shadow/
欢迎来到我的博客！
文章
76
分类
20
标签
128
总字数
72,109
运行时长
0 天
最后活动
0 天前
站点域名gaodaxiu-blog.netlify.app
Fireflyv6.16.8
Astrov7.3.2
Nodev24.21.0
pnpmv12.5.1
构建时间2026年9月28日 10:40:23
系统信息Linux / x86_64