css - 有没有办法让左边框填充所有空间(没有内部间隙)？

Question

我正在尝试使用以下代码使用 CSS 边框属性设置页面标题的样式:

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;
}

结果是
,
没关系，但左边框有“尖尖”的提示，有间隙(看起来像是一种“规定”，在这种情况下，不存在类似的边框)，如下图所示

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

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>