box-shadow生成多重边框

最新推荐文章于 2024-07-26 08:45:03 发布

samllplum

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量406

点赞数 1

分类专栏： Css基础

本文链接：https://blog.csdn.net/sunnyjingqi/article/details/104989079

版权

Css基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: yellowgreen;
                box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
            }
        </style>
    </head>

    <body>

        <div></div>
    </body>

</html>

box-shadow支持逗号分隔，比如像下面这样，想加几个边框就加几个，用逗号分隔开就行

box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink, 0 0 0 30px brown;

注：这里要注意 box-shadow的第四个属性，表示阴影的大小（就是上面代码的10px，20px，30px）

如果你想要添加多条边框，就需要把阴影大小的值依次递增，否则无效

box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);

注：如果你还要添加阴影效果，也需要把阴影大小的值进行调整，只能 >= 你设置的最后一条边框的阴影大小值

比如上面代码中的3条边框阴影大小值分别为，10px，20px，30px，那后面阴影的值只能设置30px，或比30px大

两重边框用outline


　　　　　　div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: yellowgreen;
                border: 10px solid #655;
                outline: 10px solid deeppink;
            }

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。