如何像素完美模拟这个边界？

Question

我正在试图模拟这个设计：

但是，我无法正确渲染红色边框。我尝试了一个明显的解决方案：

border: 1px solid #939393;
border-left: 4px solid red;

但它受顶部和底部边框的影响，留下带有对角线的红色条纹，正如你在这个小提琴中看到的那样： http://jsfiddle.net/anp0e03k/

有没有正确的方法来解决这个问题？

我唯一可以想到的是在顶部和底部添加一个带有红色背景和负边距的div，但它似乎是一种矫枉过正，并且很想找到一些不会破坏html语义的东西。 / p>

Answer 1

将左边框应用于div的:before pseudo element并删除div左边框。

兼容性： All modern browsers and IE8 +

提供:before

• height: 100%跨越div的整个高度

• margin-top: -1px与顶部边框重叠

• padding-bottom: 2px与底部边框重叠

然后使用

在position: absolute上:before上position: relative与body { background-color: #c2c2c2; } div { margin: 50px; background-color: #FFF; border: 1px solid #939393; height: 50px; width: 200px; border-left: none; position: relative; } div:before { content: ''; display: block; border-left: 4px solid red; height: 100%; margin-top: -1px; padding-bottom: 2px; position: absolute; top: 0; left: 0; }一样，如下例所示：

＆＃13;

＆＃13;

<div>

</div>

＆＃13;

display: inline-block

＆＃13;

＆＃13;

＆＃13;

或

:before代表vertical-align: top / middle / bottom，例如：

注意：您可能希望将:before用于top。此示例使用值body { background-color: #c2c2c2; } div { margin: 50px; background-color: #FFF; border: 1px solid #939393; height: 50px; width: 200px; border-left: none; } div:before { content: ''; display: inline-block; border-left: 4px solid red; height: 100%; margin-top: -1px; padding-bottom: 2px; vertical-align: top; }。

＆＃13;

＆＃13;

<div>
There is text in this
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

最终结果