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

这是如何渲染边框的。要实现您的目标，请改用伪元素：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

或使用box-shadow：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

输出正确。左边框15px表示，它将仅显示如此。如果你有疑问，尝试15px在顶部...你可以看到视觉作为顶部红色边框也是对角线明智。很明显。

边界一个明确削减的div

2 个答案: