html - 是否可以仅在矩形的一侧绘制三重边框？

Question

我想在不使用额外的 Html 标签的情况下仅在矩形的一侧设置三重边框。到目前为止我尝试过的代码如下所示。

方法#1

#element {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}

<div id="element"></div>

方法#2

#element {
  width: 100px;
  height: 100px;
  border: 3px solid black; /* inner border */
  box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
  outline: 12px solid green; /* fill */
  margin-left: 30px;
  margin-top: 30px;
}

<div id="element"></div>

但是这只能在你需要所有边上的三边的情况下使用，而不是我只需要一个边上的三边。这可能吗？请帮助我

Answer 1

使用这个 CSS 属性

box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;

#element {
  width: 100px;
  height: 100px;
  box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;
}

<div id="element"></div>