box-shadow巨详细的具体使用方法，可以直接看图

莹莹酱~

已于 2023-07-12 13:42:40 修改

阅读量5k

点赞数 7

分类专栏： css 文章标签：前端 html css

于 2023-06-06 17:06:07 首次发布

本文链接：https://blog.csdn.net/qq_36825145/article/details/131068938

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

box-shadow的作用是给元素添加周边的阴影效果

box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径  阴影扩展半径  阴影颜色 阴影类型
            offset-x  offset-y  blur-radius  spread-radius color

例如：div{box-shadow:0 0 3px 6px #0ff inset;}
第1个值为正整数代表右边框阴影
第1个值为负整数代表左边框阴影
第2个值为正整数代表下边框阴影
第2个值为负整数代表上边框阴影

第3个值为阴影模糊半径为3px（正：只能为正值值越大边缘越模糊，0：不具有模糊效果）

第4个值为阴影扩展半径为6px (阴影的大小，正：阴影扩展扩大，负：阴影扩展缩小）

第5个值为阴影颜色

第6个值为有inset 代表框内阴影，如果不写这个值，默认为外阴影

可以这样说：

第一个参数是x轴阴影段长度（水平阴影的位置）

第二个参数是y轴阴影段长度（垂直阴影的位置）

第三个参数是往四周阴影模糊半径（模糊距离）

第四个参数是往四周阴影扩展半径（扩展距离）

第五个参数是阴影颜色（阴影颜色）

例子如下：

1.分别四个方向的阴影

 /* 四个方向的 */
        .box1 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 左边阴影  第一个值为负值*/
            box-shadow: -10px 0px 0px 0px yellow;
        }
        .box2 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 右边阴影 第一个值为正值*/
            box-shadow: 10px 0px 0px 0px green;
        }
        .box3 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 上边阴影  第二个值为负值*/
            box-shadow: 0px -10px 0px 0px red;
        }
        .box4 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 下边阴影 第二个值为正值*/
            box-shadow: 0px 10px 0px 0px blue;
        }

效果图：

2.阴影模糊半径和阴影扩展半径区分

 /* box5和box6对比查看模糊半径效果 */
        /* 只有模糊半径的，10px */
        .box5 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /**/
            box-shadow: 0px 0px 10px 0px lightskyblue;
        }
        /* 只有模糊半径的，30px */
        .box6 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /*同 box-shadow: 0px 0px 30px lightskyblue;第四个值不写，那这个30px是模糊半径*/
            box-shadow: 0px 0px 30px 0px lightskyblue;

        }
        /* 有阴影模糊半径和阴影扩展半径 */
        .box7 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 0px 0px 30px 10px lightskyblue;
        }
        /* 只有阴影扩展半径 */
        .box8 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /**/
            box-shadow: 0px 0px 0px 10px lightpink;
        }

效果图：

3.内阴影和外阴影的区分

      /* 内阴影 inset */
        .box9 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 10px 10px 5px 20px lightsalmon inset;
        }
        /* 外阴影 不带inset */
        .box10 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 10px 10px 5px 20px lightsalmon;
        }

效果图：（注意区分内阴影和外阴影的方向）

4.四边设置各自的样式

 /* box11四边设置各自的样式 */
        .box11 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 0px -10px 0px 0px red,
            -10px 0px 0px 0px yellow,
            0px 10px 0px 0px blue,
            10px 0px 0px 0px  green
        }

效果图：

以下是完整html代码，小伙伴们可以把下面的代码复制到本地查看效果哟(＾Ｕ＾)ノ~ＹＯ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-shadow</title>
    <style>
        #content{
            display:flex;
        }
        /* 四个方向的 */
        .box1 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 左边阴影  第一个值为负值*/
            box-shadow: -10px 0px 0px 0px yellow;
        }
        .box2 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 右边阴影 第一个值为正值*/
            box-shadow: 10px 0px 0px 0px green;
        }
        .box3 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 上边阴影  第二个值为负值*/
            box-shadow: 0px -10px 0px 0px red;
        }
        .box4 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /* 下边阴影 第二个值为正值*/
            box-shadow: 0px 10px 0px 0px blue;
        }
        /* box5和box6对比查看模糊半径效果 */
        /* 只有模糊半径的，10px */
        .box5 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /**/
            box-shadow: 0px 0px 10px 0px lightskyblue;
        }
        /* 只有模糊半径的，30px */
        .box6 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /*同 box-shadow: 0px 0px 30px lightskyblue;第四个值不写，那这个30px是模糊半径*/
            box-shadow: 0px 0px 30px 0px lightskyblue;

        }
        /* 有阴影模糊半径和阴影扩展半径 */
        .box7 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 0px 0px 30px 10px lightskyblue;
        }
        /* 只有阴影扩展半径 */
        .box8 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            /**/
            box-shadow: 0px 0px 0px 10px lightpink;
        }
         /* 内阴影 inset */
        .box9 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 10px 10px 5px 20px lightsalmon inset;
        }
        /* 外阴影 不带inset */
        .box10 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 10px 10px 5px 20px lightsalmon;
        }
      /* box11四边设置各自的样式 */
        .box11 {
            margin: 30px 30px;
            width: 100px;
            height: 100px;
            background-color: lightgrey;
            box-shadow: 0px -10px 0px 0px red,
            -10px 0px 0px 0px yellow,
            0px 10px 0px 0px blue,
            10px 0px 0px 0px  green
        }
    </style>
</head>

<body>
    <div id="content">
     <!-- 四个方向的  -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
     <!-- box5和box6对比查看模糊半径效果  -->
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <!-- box8查看阴影扩展半径效果 -->
    <div class="box8"></div>
    <!-- box9和box10查看内阴影和外阴影 -->
    <div class="box9"></div>
    <div class="box10"></div>
    <!-- box11四边设置各自的样式 -->
    <div class="box11"></div>
   </div>
</body>

</html>