box-shadow的使用和技巧总结(详细)

最新推荐文章于 2025-02-14 14:37:35 发布

Ys@_yxl

最新推荐文章于 2025-02-14 14:37:35 发布

阅读量4.7k

点赞数 4

本文链接：https://blog.csdn.net/weixin_45817492/article/details/110096369

版权

笔记专栏收录该内容

3 篇文章

订阅专栏

盒子阴影

box-shadow

box-shadow

CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用：

box-shadow是给元素块添加周边阴影效果。
基本语法：box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow属性值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	模糊距离。但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
spread	阴影的尺寸。其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。
color	阴影的颜色。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
inset	将外部阴影 (outset) 改为内部阴影。如果不加，默认情况往外扩的阴影，加一个inset代表内聚的阴影

1. h-shadow v-shadow

案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            margin-left: 20px;
            margin-top: 20px;
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: wheat;
            box-shadow: 4px 2px ;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>

案例一
h-shadow，值如果为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边。
v-shadow 如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部。
在这里插入图片描述

2.blur模糊距离和color 阴影的颜色

案例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            margin-left: 20px;
            margin-top: 20px;
            width: 100px;
            height: 100px;
        }
        .box2{
            box-shadow:0 0 10px #0Cf;
        }
    </style>
</head>
<body>
    <div class="box2">
    </div>
</body>
</html>

在这里插入图片描述
如果使用rgba颜色值，好处是给box-shadow阴影添加了alpha透明效果。

3.spread 阴影的尺寸

案例三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            margin-left: 20px;
            margin-top: 20px;
            width: 100px;
            height: 100px;
        }
        .box3{
            box-shadow:0 0 0 15px #0CC;
        }

    </style>
</head>
<body>
    <div class="box3"></div>
</body>
</html>

案例三，只给盒子设置了阴影尺寸。
在这里插入图片描述
案例四

 .box3{
            box-shadow:0 0 10px 15px #0CC;
        }

案例四给盒子设置了阴影尺寸和模糊距离，当我们把阴影尺寸和模糊距离都设置为正值，模糊距离显示在阴影尺寸外面。
在这里插入图片描述

4. inset 内部阴影和outset外部阴影

案例五

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            margin-left: 20px;
            margin-top: 20px;
            width: 100px;
            height: 100px;
        }
        .box4{
            box-shadow:inset 0 0 10px #0CC;
        }
    </style>
</head>
<body>
    <div class="box4"></div>
</body>
</html>

案例五，把盒子都阴影设置成了inset 。
在这里插入图片描述

5.多个阴影

如果一个元素使用了多个阴影，多个阴影之间用逗号分隔。给它的四边设置阴影效果，我们是通过改变h-shadow和 v-shadow的正负值来实现阴影。并且把模糊半径设置为0，如果不设置为0的话那么其他三边也将会有阴影。这点需要注意！
案例六

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            margin-left: 30px;
            margin-top: 30px;
            width: 100px;
            height: 100px;
        }
        .box5{
            box-shadow:-20px 0 10px palegoldenrod, /*左边阴影*/
	                    20px 0 10px palegreen, /*右边阴影*/
	                    0 -20px 10px paleturquoise, /*顶部阴影*/
	                    0 20px 10px peachpuff; /*底边阴影*/
        }
    </style>
</head>
<body>
    <div class="box5"></div>
</body>
</html>