轮廓偏移outline-offset

最新推荐文章于 2024-06-18 11:48:17 发布

正在修炼web的小芮

最新推荐文章于 2024-06-18 11:48:17 发布

阅读量353

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125931405

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的outline-offset属性，该属性用于在元素的轮廓与边框之间创建空间。通过示例代码展示了如何使用outline-offset来调整轮廓的位置，使得轮廓线可以在边框外部以指定距离绘制，不会影响元素尺寸。文章还提供了两个不同颜色和样式的div示例，演示了实线和虚线轮廓以及轮廓偏移的效果。

摘要由CSDN通过智能技术生成

outline-offset 属性在轮廓与元素的边缘边框之间添加空间。

注意：轮廓与边框不同！与边框不同，轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。

    <style>
        .box1{
            margin: 20px;
            border: 1px solid black;
            outline: 4px solid red;
        }
        .box2{
            margin: 50px;
            border: 1px solid black;
            outline: 5px dashed blue;
            outline-offset: 5px;

        }
    </style>
</head>
<body>
     <div class="box1">
        这个 div 有 4 像素的红色实线轮廓，位于边框边缘外 15 像素处。
    </div>
    <div class="box2">
        这个 div 有 5 像素的蓝色虚线轮廓，位于边框边缘外 5 像素处。
    </div>
</body>

预览效果图