css3：box-shadow 用法

最新推荐文章于 2025-06-30 22:07:10 发布

转载最新推荐文章于 2025-06-30 22:07:10 发布 · 489 阅读

文章标签：

#css3a属性用法

css 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS3中box-shadow属性的用法，包括外阴影和内阴影的设置，各参数（X轴、Y轴、模糊值、颜色）的含义，适用的盒模型元素，以及为兼容不同浏览器的属性名称写法。还通过多个测试示例展示了不同参数设置下的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-shadow:（默认是外阴影，内阴影：box-shadow: X轴 Y轴 Rpx color inset;）

X轴 Y轴 Rpx color（顺序依次对应说明）

阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色

【此属性使用于盒模型如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影

如果设置文字阴影请参考知识点:text-shadow（同理）

因为是新属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式 Oper浏览器 -o-box-shadow IE>9 -ms-box-shadow 】

测试1： <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div> box-shadow: 0 0 10px #f00

（因没有使其X轴与Y轴移动设置值所在会在本身发生作用半径范围，颜色）

测试2： <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;

(与测试1不同 X轴与Y轴改变了正值（正值向右向下）所以变成了这样‍)

测试3：<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;

(与测试2不同之处是 X轴与Y轴改变成了负值（负值向左向上）所以变成了这样‍)

测试4：<div style="box-shadow:-10px 0px 10px red,   /*左边阴影*/
                                             0px -10px 10px #000, /*上边阴影*/
                                                   10px 0px 10px green, /*右边阴影*/
                                                   0px 10px 10px blue;" /*下边阴影*/ ></div>

测试5：<div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 内阴影 ( 与上面写法相同唯一不同的是添加了一个inset 其它属性与外阴影相同)