CSS实现多重边框

最新推荐文章于 2024-08-20 09:15:05 发布

CSPsy

最新推荐文章于 2024-08-20 09:15:05 发布

阅读量2.7k

点赞数 4

分类专栏： CSS 文章标签： CSS 前端

本文链接：https://blog.csdn.net/m0_51573433/article/details/124239295

版权

CSS 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

CSS实现多重边框

1. box-shadow
2. outline
3. 总结

1. box-shadow

box-shadow 适用场景：大于等于两层边框，实线边框效果

它的语法：

box-shadow: x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色;

先建立一重边框

利用 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>多重边框</title>
    <style>
        .box1 {
            margin: 100px auto;
            height: 300px;
            width: 300px;
            background-color: gray;
            box-shadow: 0 0 0 10px rgb(102, 85, 85);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

建立多重边框

由于 box-shadow 支持逗号分隔语法，所以可以创建任意数量的投影，即多重边框

box-shadow: 0 0 0 10px rgb(102, 85, 85), 0 0 0 20px rgb(89, 122, 122);

在这里插入图片描述

box-shadow 是层层叠加的，第一层投影位于最顶层，所以第二层的扩张半径要加上第一层的，这里即（10px + 10px)

Notes:

投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会受到 box-sizing 属性的影响。
可以通过内边距或外边距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要占据的空间。
当投影是外扩时，想要它们相应鼠标事件，可以给 box-shadow 属性加上 inset 关键字，来使投影绘制在元素的内圈。
请注意，此时你需要增加额外的内边距来腾出足够的空隙来绘制它

2. outline

outline 适用场景：两层边框，虚线 / 实线边框效果

它的语法：

outline: 宽度 | 样式 | 颜色;

实线边框效果

<!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>多重边框</title>
    <style>
        .box1 {
            margin: 100px auto;
            height: 300px;
            width: 300px;
            background-color: gray;
            border: 10px solid rgb(102, 85, 85);
            outline: 10px solid rgb(89, 122, 122);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

实现虚线边框

只用把 outline 里面的 solid 换成 dashed，宽度可以调小一点

在这里插入图片描述

想要实现实线 / 虚线内扩，即在内部绘制边框，要通过 outline-offset 来实现
outline-offset：用于设置 outline 与一个元素边缘或边框之间的间隙（负值将轮廓绘制在元素之内.）

.box1 {
    margin: 100px auto;
    height: 300px;
    width: 300px;
    background-color: gray;
    border: 10px solid rgb(102, 85, 85);
    outline: 3px dashed rgb(46, 51, 51);
    outline-offset: -15px;
}