2.0 KiB
2.0 KiB
title | localeTitle |
---|---|
CSS3 Shadow Effects | CSS3阴影效果 |
CSS3阴影效果
使用CSS3,您可以创建两种类型的阴影: text-shadow
(向文本添加阴影)和box-shadow
(向其他元素添加阴影)。
CSS3文字阴影
text-shadow
属性最多可以包含四个值:
- 水平阴影
- 垂直阴影
- 模糊效果
- 颜色
例子:
- 普通文字阴影
h1 {
text-shadow: 2px 2px 5px crimson;
}
- 发光的文字效果
h1 {
text-shadow: 0 0 4px #00FF9C;
}
多个阴影
要实现此目的,您只需在两组(或多组)值之间添加逗号:
h1 {
color: white;
text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5;
}
CSS3 Box Shadow
box-shadow
属性最多可以包含六个值:
- (可选)
inset
关键字(将阴影更改为框架内的一个) - 水平阴影
- 垂直阴影
- 模糊效果
- 传播
- 颜色
例子:
.first-div {
box-shadow: 1px 1px 5px 3px grey;
}
.second-div {
box-shadow: 0 0 5px 1px lightgrey;
}
.third-div {
box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75);
}
更多信息:
- MDN网络文档
- 检查浏览器支持
- CSS盒子阴影生成器 (随意尝试盒阴影)