box-shadow 属性用于在元素的框架上添加阴影效果
语法
div{
/* 主要参数 */
box-shadow: 10px 10px 20px 20px red;
box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色;
}
特殊值
inset:
- 如果没有指定
inset
,默认阴影在边框外,即阴影向外扩散; - 使用
inset
关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。
/* inset 放在前后都可以 */
box-shadow: 0px 0px 10px 10px red inset;
使用前后对比:
特殊场景
1、四周阴影:
box-shadow: 参数1 参数2 10px 10px red;
/* 四周阴影就是参数1(x) 参数2(y)设为 0px */
box-shadow: 0px 0px 10px 10px red;
2、可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开
box-shadow:
0px 0px 5px 5px #000,
0px 0px 10px 10px red;