更改CSS邊框邊緣如何相遇？

Question

CSS的邊框邊緣的樣子：一個

我怎麼想他們看：乙

如何做到這一點？

我嘗試過使用「外部陰影」，但即使模糊設置爲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>