双边框之间的空间[重复]答案

【问题标题】：space between double borders [duplicate]双边框之间的空间[重复]
【发布时间】：2020-10-30 17:52:03
【问题描述】：

我正在尝试使用border: 10px double red; 添加双边框，但如何控制边框的粗细和间距？我希望边框的厚度为 1px。如果我只是将边框更改为 1px，则边框会重叠并且几乎只有一个边框可见。我也尝试了边框宽度 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;
}

【问题讨论】：

标签： html css border border-spacing

【解决方案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>

【讨论】：

这似乎解决了问题！但是，我真的看不出如何改变红色？我想使用#B38D6A - 尝试了一些十六进制到 HSL 转换器但没有运气:(
知道了！盒子阴影：0 0 0 1px hsl(29deg 32% 56%), 0 0 0 5px hsl(0deg 0% 100%), 0 0 0 6px hsl(29deg 32% 56%), 0 0 0 15px hsl(0deg 0% 97%); - 谢谢！
我已经更新了示例。如果对您有帮助，请查看更改并将答案标记为有用

【解决方案2】：

可以考虑outline-offset

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

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

这应该被选为答案，我相信可以完成操作员想要的。上面选择的答案虽然有效，但只会给出“错觉”。 Outline-Offset 从字面上创建了 op 要求的第二个边框。更不用说，Temani 的解决方案要简单得多。您可以通过更改轮廓偏移值来控制两个边框的间距，您可以通过更改边框值和/或轮廓值来控制每个边框的粗细

【解决方案3】：

我不相信有一种内置的方法可以调整双边框本身的间距，但是，这里有一种方法可以调整嵌套 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>

【讨论】：