box-shadow属性详解

最新推荐文章于 2023-07-24 12:12:08 发布

只想搞钱的菜鸟

最新推荐文章于 2023-07-24 12:12:08 发布

阅读量1.3k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_42207996/article/details/118383342

版权

box-shadow各参数设置效果图

box-shadow向框添加阴影。
box-shadow：h-shadow v-shadow blur spread color inset
h-shadow(必填): 水平方向阴影
v-shadow(必填): 垂直方向阴影
blur: 阴影模糊距离
spread: 阴影尺寸
color: 阴影颜色，默认为黑色(#000)
inset: 内阴影，设置后为内阴影，不设置为外阴影
box-shadow属性详解

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            border: 0px;
            font-size: 14px;
        }
        div {
            width: 200px;
            border: 1px solid #000000;
            padding: 5px;
            line-height: 20px;
        }
        .box-basic {
            width: 400px;
            height: 200px;
            margin: 50px auto;
            box-shadow: 10px 10px 5px 10px #dedede,-10px -10px 5px #000;
        }

        .shadow-box {
            width: 1200px;
            display: flex;
            margin: 0px auto;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 30px;
        }

        .box1 {
            box-shadow: 5px 0px 0px #999999;
        }

        .box2 {
            box-shadow: 5px 0px 0px 10px #999999;
        }

        .box3 {
            box-shadow: 5px 0px 10px #000000;
        }

        .box4 {
            box-shadow: 5px 0px #999999 inset;
        }

        .box5 {
            box-shadow: 0px 0px 10px 10px #000000;
        }

        .box6 {
            box-shadow: -5px -5px 5px #999999;
        }

        .box7 {
            box-shadow: 0px 0px -5px -5px #000000;
        }

        .box8 {
            box-shadow: 5px 0px 0px #FF0000,0px 5px 0px #002afb,-5px 0px 0px #CCFF00,0px -5px 0px #000000;
        }
    </style>
</head>
<body>
    <div class="box-basic">
        <p><pre>box-shadow: h-shadow v-shadow blur spread color inset;</pre></p>
        <p><pre>h-shadow:   水平阴影位置(必填)</pre></p>
        <p><pre>v-shadow:   垂直阴影位置(必填)</pre></p>
        <p><pre>blur:       阴影模糊距离</pre></p>
        <p><pre>spread:     阴影尺寸(默认0px)</pre></p>
        <p><pre>color:      阴影颜色(默认为#000)</pre></p>
        <p><pre>inset:      将外阴影转为内阴影</pre></p>
    </div>

    <div class="shadow-box">
        <div class="box box1">
            <p>box-shadow: 5px 0px 0px #999999;</p>
            <p><pre>水平位置阴影5px</pre></p>
            <p><pre>垂直位置阴影0px</pre></p>
            <p><pre>阴影模糊距离0px</pre></p>
            <p><pre>阴影尺寸0px</pre></p>
            <p><pre>仅有右侧显示阴影</pre></p>
        </div>
        <div class="box box2">
            <p>box-shadow: 5px 0px 0px #999999;</p>
            <p><pre>水平位置阴影5px</pre></p>
            <p><pre>垂直位置阴影0px</pre></p>
            <p><pre>阴影模糊距离0px</pre></p>
            <p><pre>阴影尺寸10px</pre></p>
            <p><pre>左侧阴影=阴影尺寸10px-水平位置阴影</pre></p>
            <p><pre>右侧阴影=阴影尺寸10px+水平位置阴影</pre></p>
            <p><pre>上侧阴影=阴影尺寸10px-垂直位置阴影</pre></p>
            <p><pre>下侧阴影=阴影尺寸10px+垂直位置阴影</pre></p>
        </div>
        <div class="box box3">
            <p>box-shadow: 5px 0px 10px #000000;</p>
            <p><pre>水平位置阴影5px</pre></p>
            <p><pre>垂直位置阴影0px</pre></p>
            <p><pre>阴影模糊距离10px</pre></p>
            <p><pre>左侧模糊阴影=模糊距离-水平位置阴影</pre></p>
            <p><pre>右侧模糊阴影=模糊距离+水平位置阴影</pre></p>
            <p><pre>上侧模糊阴影=模糊距离-垂直位置阴影</pre></p>
            <p><pre>下侧模糊阴影=模糊距离+垂直位置阴影</pre></p>
        </div>
        <div class="box box4">
            <p>box-shadow: 5px 0px #999999 inset;</p>
            <p><pre>水平位置阴影5px</pre></p>
            <p><pre>垂直位置阴影0px</pre></p>
            <p><pre>阴影模糊距离0px</pre></p>
            <p>inset设置内阴影后，计算距离左右颠倒，上下颠倒</p>
        </div>
        <div class="box box5">
            <p>box-shadow: 0px 0px 10px #000000;</p>
            <p><pre>阴影模糊距离10px</pre></p>
            <p><pre>阴影尺寸10px</pre></p>
            <p><pre>阴影=阴影模糊距离+阴影尺寸</pre></p>
            <p><pre>阴影模糊距离与阴影尺寸叠加</pre></p>
        </div>
        <div class="box box6">
            <p>box-shadow: -5px -5px 5px #999999;</p>
            <p><pre>水平位置阴影-5px</pre></p>
            <p><pre>垂直位置阴影-5px</pre></p>
            <p><pre>阴影方向向左向上</pre></p>
            <p><pre>水平位置阴影小于0则向左</pre></p>
            <p><pre>垂直位置阴影小于0则向上</pre></p>
        </div>
        <div class="box box7">
            <p>box-shadow: 0px 0px -5px -5px #000000;</p>
            <p><pre>阴影模糊距离小于0不显示</pre></p>
            <p><pre>阴影尺寸小于0不显示</pre></p>
        </div>
        <div class="box box8">
            <p>box-shadow: 5px 0px 0px #FF0000,
                                0px 5px 0px #002afb,
                                -5px 0px 0px #CCFF00,
                                0px -5px 0px #000000;</p>
            <p><pre>box-shadow属性以逗号隔开可以叠加</pre></p>
        </div>
    </div>
</body>
</html>

只想搞钱的菜鸟

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
box-shadow属性详解

box-shadow各参数设置效果图box-shadow向框添加阴影。box-shadow：h-shadow v-shadow blur spread color inseth-shadow(必填): 水平方向阴影v-shadow(必填): 垂直方向阴影blur: 阴影模糊距离spread: 阴影尺寸color: 阴影颜色，默认为黑色(#000)inset: 内阴影，设置后为内阴影，不设置为外阴影具体实现代码<!DOCTYPE html><html lang="en
复制链接

扫一扫