是否可以在具有其他边框的元素中使用顶部边框占据整个宽度？

Question

我正在努力创造这个：

The symphony documentations on external paramaters

但是，只需使用

border:10px solid green;
border-top:20px solid black;

改为创建此图像

有很直接的方法来实现这一目标。

您可以使用2个元素
或者是一个伪元素 https://jsfiddle.net/5rnn328n/

但两人看起来都很丑陋。

是否可以只使用一个元素来完成这种样式？即。我有一个div，我可以使用的是内联样式。

<div style="[insert answer here]"></div>

Answer 1

您可以使用box-shadow属性...

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-top: 20px solid black;
  box-shadow: inset -20px 0px green, inset 20px 0px 0px green, inset 0 -20px 0px green;
}

<div></div>