有没有办法让左边框填满所有space（没有内部间隙）？

Question

我正在尝试使用以下代码为带有 CSS border 属性的页面标题设置样式：

h2 {
    display: inline-block;
    margin: 5px 0 5px 0;
    padding: 0 0 0 5px;
    background-color: #eee;
    border-color: #aaa;
    color: #000;
    border-style: dotted dotted dotted solid;
    border-width: 1px 1px 1px 5px;
}

结果是

,

没问题，但是左边框有“尖”的提示，有间隙（看起来像是一种“规定”，在这种情况下，non-existent 类似的边框），就像在下图

有没有办法获得左边框的“方形”提示？

Answer 1

不，您不能使用原生边框。但是你可以使用 :before 元素来伪造它：

h2 {
  position: relative; /* make title relative */
  display: inline-block;
  margin: 5px 0 5px 0;
  padding: 0 0 0 5px;
  background-color: #eee;
  border-color: #aaa;
  color: #000;
  border-style: dotted dotted dotted solid;
  border-width: 1px 1px 1px 5px;
}

h2:before {
  content: "";
  position: absolute;
  height: calc(100% + 2px); /* 2px is the addition of the border-bottom (1px) and the border-top (1px) */
  width: 5px; /* same size than the border-left */
  background-color: #aaa;
  left: -5px;
  top: -1px; /* size of the border-top */
}

<h2>A title</h2>

有没有办法让左边框填满所有space（没有内部间隙）？

Is there a way to make the left border fill all the space (without the inner gap)?

css

border