边界清晰的 div

Question

这是一个带有一些边框的框： http://jsfiddle.net/wywmLshc/

.box{
    height:300px;
    width:900px;
    border-left: 15px solid black;
    border-top:5px solid red;
    border-bottom: 5px solid red;
}

黑色和红色边界相交处有 45 度角。我不想要这个。我只想要左边的黑色边框，红色的边框从它旁边开始（而不是在它上面）。我需要制作另一个 div 来完成这个吗？还是有一些巧妙的 CSS 技巧可以解决这个问题？

Answer 1

这就是渲染边框的方式。要实现您想要的，请改用伪元素：

.box {
    height:300px;
    width:900px;
    border-top:5px solid red;
    border-bottom: 5px solid red;
    position:relative
}
.box:before {
    content:'';
    position:absolute;
    width:15px;
    top:-5px; /* .box border-top value */
    bottom:-5px; /* .box border-bottom value */
    left: -15px; /* .box:before width */
    background: black;
}

<div class="box"></div>

或使用box-shadow:

.box {
    height:300px;
    width:900px;
    border-top:5px solid red;
    border-bottom: 5px solid red;
    position:relative;
    box-shadow: -15px 0 0 0 black;
}

<div class="box"></div>