这是一个简单的问题,我甚至认为有人曾经问过这个问题,但它从来没有得到真正的答案.
我想要的是避免边界重叠,就这么简单.这是一个例子：
- div{
- width: 400px;
- height: 150px;
- border: 1px solid red;
- border-bottom: 7px solid black;
- }
您可以看到边框在边角重叠.
这是实例：jsFiddle Example
我真正想要做的是使底部边框覆盖右边界和左边界.
谁能告诉我我能在这做什么？
解决方法
您可以在div上覆盖一个伪元素：
- div {
- background-color: gold;
- border-top: 4px solid #172e4e;
- height: 100px;
- position: relative;
- width: 100px;
- }
- div::after {
- content: "";
- position: absolute;
- bottom: 0; top: 0px; left: 0; right: 0;
- border-right:4px solid orange;
- border-left:4px solid orange;
- }
