AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

怎样给边框添加阴影？CSS3属性box-shadow帮你搞定！

2023-10-22 999
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS3 给边框添加阴影 -- box-shadow属性

作者:WangMin
格言:努力做好自己喜欢的每一件事

关于box-shadow属性，有的小伙伴可能用的时候直接复制已有的，并没有仔细了解过box-shadow属性的参数分别是什么含义，最后导致阴影的样式不能按照自己的需求自由控制，让自己很苦恼。接下就一起来好好学习这个属性吧！！

box-shadow属性的参数

此属性的基本语法：{ box-shadow:[inset] x-offset y-offset blur-radius spread-radius color }。

1、inset [ 阴影类型 ]

这个参数是一个可选参数。如不声明，默认阴影类型是外阴影；如果取它的唯一值 "inset" ，则阴影类型为内阴影。它可以作为第一个参数出现，也可以作为最后一个参数出现。默认情况下代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

1.png

当设置了阴影类型为 "inset" 时，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

2.png

2、x-offset [ 阴影水平偏移量 ]

这个参数的取值分为两种情况：可以是正值，也可以是负值。

为正值的情况下，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:5px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:5px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:5px 0px 5px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

3.png

从上述例子中可以得到一个结论：x-offset的取值如果为正值时，则阴影在元素的右边。

为负值的情况下，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:-5px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:-5px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:-5px 0px 5px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

4.png

从上述例子中可以得到一个结论：x-offset的取值如果为负值时，阴影在元素的左边。

3、y-offset [ 阴影垂直偏移量 ]

这个参数的取值与x-offset的取值是一样的。分为两种情况：可以是正值，也可以是负值。

为正值的情况下，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:0px 5px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

5.png

从上述例子中可以得到一个结论：y-offset的取值如果为正值时，则阴影在元素的底部。

为负值的情况下，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:0px -5px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:0px -5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:0px -5px 5px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

6.png

从上述例子中可以得到一个结论：y-offset的取值如果为负值时，则阴影在元素的顶部。

4、blur-radius [ 阴影模糊半径 ]

这个参数是一个可选参数，代表阴影的模糊半径，取值分为两种情况：0 或者正值。此外该值不支持负数。

值为0的情况下，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:5px 5px 0px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:5px 5px 0px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:5px 5px 0px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

7.png

从上述例子中可以得到一个结论：blur-radius的取值如果为0时，则阴影不具有任何模糊效果。

值为其他正数的情况下，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

8.png

从上述例子中可以得到一个结论：blur-radius的取值如果为正数时，则阴影具有模糊效果。并且这个值越大，阴影的边缘就越模糊。

5、spread-radius [ 阴影扩展半径 ]

这个参数是一个可选参数，代表着阴影的尺寸。这个值可以被看作是从元素到阴影的距离。如果正值会在元素的四个方向延伸阴影；负值会使阴影变得比元素本身尺寸还要小，甚至被元素遮住。

当为默认值“0”的时候，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);
}

网页显示效果如下：

9.png

从上述例子中可以得到一个结论：spread-radius的取值为0时，则会让阴影变得和元素的大小一同等大小。

当为任意正值的时候，代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:0px 0px 5px 5px rgba(0,0,0,0.75);
    -webkit-box-shadow:0px 0px 5px 5px rgba(0,0,0,0.75);
    -moz-box-shadow:0px 0px 5px 5px rgba(0,0,0,0.75);
}

网页显示效果如下：

10.png

从上述例子中可以得到一个结论：spread-radius的取值为任意正值时，则会在元素的四个方向延伸对应大小的阴影

6、color [ 阴影颜色 ]

这个值是指定阴影的颜色，是一个可选参数。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致。代码如下：

<div class="box color1"></div>
<div class="box color2"></div>
.box{
   width:100px;
   height:100px;
   background:#69f;
   margin:20px 0 0 20px;
}
.color1{
   box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
   -webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
   -moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
}
.color2{
   box-shadow:5px 5px 5px 0px #f00;
   -webkit-box-shadow:5px 5px 5px 0px #f00;
   -moz-box-shadow:5px 5px 5px 0px #f00;
}

网页显示效果如下：

11.png

使用box-shadow属性设置各种阴影效果

1、给一个元素四边设置阴影

如果需要给一个元素四边设置阴影时，需要将x-offset和y-offset的偏移量设置为0，只需要设置阴影模糊半径和阴影颜色，阴影扩展半径按照自己需求设置。代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background:#69f;
    box-shadow:0px 0px 5px #f00;
    -webkit-box-shadow:0px 0px 5px #f00;
    -moz-box-shadow:0px 0px 5px #f00;
}

网页显示效果如下：

12.png

2、给一个元素四边设置不同颜色的阴影

如果需要给一个元素四边设置不同颜色的阴影时，阴影之间用逗号分隔。给对象四边设置不同的阴影效果，通过改变x-offset和y-offset的正负值来实现，左边阴影 将x-offset设置为负值；右边阴影 将x-offset设置为正值；底部阴影 将y-offset设置为正值；顶部阴影 将y-offset设置为负值。案例如下：

<div class="box"></div>
.box{
width:100px;
height:100px;
background:#69f;
box-shadow:-5px 0px 5px #f00,
            5px 0px 5px blue,
            0px -5px 5px yellow,
            0px 5px 5px #000;
-webkit-box-shadow:-5px 0px 5px #f00,
            5px 0px 5px blue,
            0px -5px 5px yellow,
            0px 5px 5px #000;
-moz-box-shadow:-5px 0px 5px #f00,
            5px 0px 5px blue,
            0px -5px 5px yellow,
            0px 5px 5px #000;
}

网页显示效果如下：

13.png

3、给元素设置多重阴影

当给同一个元素使用多个阴影属性时，需要注意它的顺序，阴影将按照设置的顺序从里往外显示；还需要注意的一点是必须设置阴影扩展半径，并且按照设置的顺序，阴影扩展半径的值要依次递增。代码如下：

<div class="box"></div>
.box{
     width:100px;
     height:100px;
     background:#69f;
     margin:20px 0 0 20px;
     box-shadow: 0px 0px 3px 3px pink,
                 0px 0px 3px 6px yellow,
                 0px 0px 3px 9px orange;
     -webkit-box-shadow: 0px 0px 3px 3px pink,
                 0px 0px 3px 6px yellow,
                 0px 0px 3px 9px orange;
     -moz-box-shadow: 0px 0px 3px 3px pink,
                 0px 0px 3px 6px yellow,
                 0px 0px 3px 9px orange;
 }

网页显示效果如下：

14.png

4、其他特殊效果:立体投影

立体投影的关键点在于使用伪元素::before和::after生成大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再给为元素设置阴影。

立体效果1，代码如下：

<div class="box"></div>
.box {
   position: relative;
   width: 350px;
   height: 150px;
   background: pink;
}
.box::before,.box::after{
   content: "";
   width: 300px;
   height: 75px;
   position: absolute;
   top:60px;
   z-index:-1;
   background: palevioletred;
   box-shadow: 0 0 10px 10px palevioletred;
   -webkit-box-shadow: 0 0 10px 10px palevioletred;
   -moz-box-shadow: 0 0 10px 10px palevioletred;
}

.box::before {
   left: 18px;
   transform: rotate(-6deg);
   -webkit-transform: rotate(-6deg);
   -moz-transform: rotate(-6deg);
}
.box::after {
   right: 18px;
   transform: rotate(6deg);
   -webkit-transform: rotate(6deg);
   -moz-transform: rotate(6deg);
}

网页显示效果如下：

15.png

立体效果2，代码如下：

<div class="box"></div>
.box {
    position: relative;
    width: 350px;
    height: 150px;
    background: pink;
}
.box::before,.box::after{
    content: "";
    width: 150px;
    height: 100px;
    position: absolute;
    top:26px;
    z-index: -1;
    background: palevioletred;
    box-shadow: 0 0 10px 10px palevioletred;
    -webkit-box-shadow: 0 0 10px 10px palevioletred;
    -moz-box-shadow: 0 0 10px 10px palevioletred;
}

.box::before {
    left: 0px;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    transform: rotate(-8deg);
}
.box::after {
    right: 0px;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
}

网页显示效果如下：

16.png

立体效果3，代码如下：

<div class="box"></div>
.box {
    position: relative;
    width: 350px;
    height: 150px;
    margin:25px;
    background: pink;
}
.box::before,.box::after{
    content: "";
    width: 300px;
    height: 100px;
    position: absolute;
    top:26px;
    left:15px;
    z-index: -1;
    background: palevioletred;
}
.box::before {
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    transform: rotate(-8deg);
    box-shadow: 10px -10px 10px 10px palevioletred;
    -webkit-box-shadow:10px -10px 10px 10px palevioletred;
    -moz-box-shadow: 10px -10px 10px 10px palevioletred;
}
.box::after {
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
    box-shadow: 10px 10px 10px 10px palevioletred;
    -webkit-box-shadow:10px 10px 10px 10px palevioletred;
    -moz-box-shadow: 10px 10px 10px 10px palevioletred;
}

网页显示效果如下：
17.png

box-shadow属性的兼容性

为了兼容各主流浏览器并支持它们的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，需要在属性的名称前加上-webkit-，写成-webkit-box-shadow的形式。Firefox浏览器则需要在属性的名称前加上-moz-，写成-moz-box-shadow的形式。上面的案例中，我将box-shadow的两种兼容格式都写上了，所以在使用中不要忘记加上。以下是box-shadow在各个浏览器的兼容性。

18.png

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! :smile: 后续继续更新!!

文章标签：
Web App开发
iOS开发
关键词：
CSS边框
CSS属性
边框CSS
CSS box-shadow
CSS属性box-shadow
汪末末
目录
相关文章
html的七十二变
|
20天前
|
前端开发
如何设置 CSS 盒子模型的边框样式？
CSS盒子模型的边框样式可以通过`border`属性设置，包括边框宽度、样式和颜色。例如：`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边，如`border-top`、`border-right`等。
html的七十二变
46 2
html的七十二变
|
20天前
|
前端开发 容器
给 CSS 盒子模型添加边框时，需要注意什么？
在给CSS盒子模型添加边框时，需要注意边框的宽度、样式和颜色，以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度，可能需要调整其他属性以保持布局的完整性。
html的七十二变
31 1
gudanhero2018
|
2月前
|
前端开发
CSS属性：盒子模型
CSS属性：盒子模型
gudanhero2018
32 0
你都不懂
|
13天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
你都不懂
12 1
神明木佑
|
30天前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
神明木佑
60 1
html的七十二变
|
1月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中，属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括：文本属性（如 `font-family`, `color`），列表属性（如 `list-style`），表格布局属性（如 `border-collapse`），以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
html的七十二变
39 4
你都不懂
|
13天前
CSS3圆角边框
CSS3圆角边框
你都不懂
31 0
你都不懂
|
13天前
|
前端开发
css简写属性
css简写属性
你都不懂
23 0
神明木佑
|
30天前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
神明木佑
11 0
邹荣乐
|
30天前
|
前端开发
运用CSS伪类与属性，巧妙实现背景图片旋转效果
运用CSS伪类与属性，巧妙实现背景图片旋转效果
邹荣乐
24 0