如何在框外设置CSS边框

Question

我有3个边框的元素：left (4px), top (1px) and bottom (1px)：

但是border-left看起来像这样：

如何在框外设置border-left，进行渲染而不切割边缘？

这是我的代码示例：

HTML：

<a class="element">Some Text</a>

CSS：

.element {
    display: block;
    width: 200px;
    height: 40px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: 4px solid red;
}

Answer 1

使用CSS中的:before伪元素解决了问题：

.element {
    display: block;
    width: 200px;
    height: 40px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    position: relative; /* Make sure you have this */
    padding-left: 8px; /* Nudge the text by few pixels in the box */
}

.element:before {
    content: "";
    background-color: red;
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

Answer 2

这应该可以解决问题：

-webkit-background-clip:padding;
-moz-background-clip:padding;
background-clip:padding-box;

Answer 3

看一下这个简单的例子：

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

这可能对你有帮助。

Answer 4

在左侧添加填充。

.element {
    padding-left:4px;
}

DEMO here.