css 双线框内外颜色

在 CSS 中，双线框是一种常用的视觉效果，可以通过添加内外不同颜色的边框实现。双线框是一种简单而又实用的边框效果，可以让页面看起来更美观、更整洁。

HTML 代码：div class="double-border">
      p>
    这是一段文字/p>
    /div>
CSS 代码：.double-border {
      border: 3px double #f00;
      padding: 10px;
}

上述 CSS 代码中，border 属性定义了双线框的宽度、样式和颜色。其中，3px 表示边框宽度，double 表示边框样式，而 #f00 则是边框的颜色。

如果我们想要给双线框添加内外不同颜色的边框，可以使用 :before 和 :after 伪元素来实现。

CSS 代码：.double-border {
      position: relative;
      padding: 10px;
}
.double-border:before,.double-border:after {
      content: "";
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border: 3px solid #f00;
}
.double-border:before {
      z-index: 1;
}
.double-border:after {
      z-index: -1;
      border-color: #00f;
}
    

上述 CSS 代码中，我们使用了 :before 和 :after 伪元素来分别创建内部和外部的边框。首先，我们在外部创建 3px 红色实线边框，然后在内部创建 3px 蓝色实线边框。为了让内部边框显示在外部边框之上，我们设置了 z-index 属性。

通过这种方法，我们可以轻松地实现双线框内外不同颜色的边框效果，让页面更加美观、更加精美。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！