更改 CSS 边界边缘的交汇方式？

Question

css 边界边缘的外观：A

我希望它们看起来如何：B

我该如何完成？

我试过使用 "outer shadow"，但即使将模糊设置为 0，得到的左边框也明显模糊。对其他解决方案开放，但最好不要添加额外的元素。

Answer 1

编辑，可以使用：

box-shadow: 0 5px red;

这表明两种技术都用在一个 DIV:

<div id="square" style="height: 50px; width: 50px; border-left: 5px solid black; border-top: 5px solid red;box-shadow: 0 5px red;"></div>

如果您正在寻找两侧黑色边框和顶部和底部红色边框：

<div id="square" style="height: 50px; width: 50px; border-left: 5px solid black; border-right: 5px solid black;box-shadow: 0px 5px 0px red, 0px -5px 0px red;"></div>

更改 CSS 边界边缘的交汇方式？

Change how CSS border edges meet?

html

css

border