space 双边框之间

Question

我正在尝试使用 border: 10px double red; 添加双边框，但如何控制边框的粗细和间距？我希望边框的厚度为 1px。如果我只是将边框更改为 1px，则边框会重叠并且只有一个边框可见。我也试过 border-width 1px 但结果相同。

我也一直在尝试使用边框间距属性，但无法正常工作。

这里是我想要完成的截图：https://share.getcloudapp.com/JrugmEG2

工作 jsfiddle：https://jsfiddle.net/7Lw21z85/

HTML:

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

CSS:

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  border: 10px double red;
  padding: 8%;
  outline: 15px solid #ffffff;
}

Answer 1

您可以使用 box-shadow 在元素周围制作两个边框的错觉

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  padding: 8%;
  box-shadow: 0 0 0 1px #B38D6A, 0 0 0 5px #fff, 0 0 0 6px #B38D6A, 0 0 0 11px #fff;
}

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

Answer 2

可以考虑outline-offset

.box {
  margin:15px;
  width:200px;
  height:100px;
  border:1px solid red;
  outline:1px solid red;
  outline-offset:9px;
}

<div class="box"></div>

Answer 3

我认为没有 built-in 方法可以调整双边框本身的间距，但是，这里有一种方法可以调整嵌套 div 中每个实线边框的粗细。

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.outer-box {
  background-color: white;
  border: 1px solid red;
  padding: 2%;
  outline: 5px solid #ffffff;
}

.middle-box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}

.box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}

<div class="container">
<div class="outer-box">
<div class="middle-box">
   <div class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </div>
   </div>
   </div>
</div>

space 双边框之间

space between double borders

html

css

border

border-spacing