CSS3 box-shadow 属性

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

原创最新推荐文章于 2025-06-30 22:07:10 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了CSS中box-shadow属性的使用方法，包括其语法、各个参数的意义及如何为元素添加阴影效果。提供了实例代码帮助理解。

box-shadow 属性向框添加一个或多个阴影。

语法

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) 改为内部阴影。	测试

案例：给一个div添加阴影

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>


<div></div>


</body>
</html>