如何在CSS 中创建【双边框】，史上最全！-编程网

今天我们来一下用 六种不同的 CSS 生成双边框的效果

首先回顾一下 三个 CSS 边框的属性： 

 边框的颜色、 边框的宽度、  指定边框是实线、虚线、双线还是其他样式。

首先，让我们在创建六个。

然后，在  文件内给每个设置宽高为 ，每个都设置了不同的背景颜色以便区分，

如下：

设置 属性值：

 CSS 属性允许我们在框的四个边上设置元素的线条样式。

要创建双边框，使用  关键字。这会在两条边界线之间创建填充。我们还可以使用  在元素的特定一侧创建双边框样式。

接下来，使用  （轮廓）属性。轮廓和边框非常相似，轮廓不占用任何空间，因为它们是绘制在元素内容之外。

通过  属性实现双边框效果，我们需要设置边框和轮廓。

与  不同的是，  不会在自身和边框之间创建间隙。所以我们需要使用  属性：

如上代码所示，  属性可用于向内调整轮廓（如设置负值，如  ）或向外调整（如设置正值，如  ）

我们将为  设置边框和相对定位。然后，我们将使用  伪元素添加辅助边框：

创建一个红色的外部边框。伪元素使用绝对定位设置绿色内部边框，并使用  、  、  和  值将调整两个边框之间的间距。

接下来，使用  边框阴影设置。通过使用逗号分隔两个的阴影，将偏移和模糊设置设置为零，并为每个阴影赋予适当的大小，可以使边框阴影看起来像双边框：

在此示例中，第二个（绿色）阴影是第一个（红色）阴影的两倍，红色阴影盖住了绿色阴影，让我们觉得是同样的大小。

接下来，让我们使用  属性在  元素上创建双边框效果。

在这里，CSS  是让元素的背景不作用在 上。 周围的间距，呈现白色边框的外观（实际上是padding）。

最后，让我们使用  函数创建双边框。此功能可用于沿直线在两种或多种颜色之间产生渐变。

 关键字构成了渐变线的起点。它指定渐变的方向（  、  、  或  ）。如果未指定，则默认为  。

我们也可以用角度来表示方向。值  、  、  和  分别对应于角度  、  、  和  。

在此示例中，我们首先为  元素指定  的边框宽度和绿色。然后，我们在  属性上为每一侧设置线性渐变：

此处，渐变从红色（宽度为  ）变为透明。透明渐变的宽度必须小于指定颜色，以消除任何淡化效果。

设置 CSS 边框属性后边框不呈现的最常见原因是未设置 属性，但  和  属性值可以留空。

设置双边框的6种方法： 边框样式    轮廓+边框   阴影+阴影重叠    边框+背景切割   边框+伪元素    边框渐变

全文完 谢谢！

开启AdminJS成长之旅！这是我参与「AdminJS · 2 月更文挑战」的第 8 天

点击查看活动详情