如何设置CSS左边框盒

之外我有3个边界元素：left (4px), top (1px) and bottom (1px)：如何设置CSS左边框盒

enter image description here

但左边框看起来是这样的：

enter image description here

如何在框外部设置边框左侧，以便在不削减边缘的情况下进行渲染？

这是我的代码示例：

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

来源

2013-12-14 zur4ik

哪里是CSS？ –

解决的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; 
}

来源

2013-12-14 09:19:22 zur4ik

只需要注意一下，你在'100'和'％'之间有一个空格，你也不需要'px'代替'0'，而且你也不需要'border-left'了:)并且欢迎你.. –

刚刚编辑了你的答案，你已经忘记了'填充左'来推动文本，如果你不喜欢它，你可以恢复编辑回来:) –

-1

看看这个简单的例子：

<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>

这可能会帮助你。

来源

2013-12-14 09:00:30 Sandesh

我理解你的想法，但轮廓不能仅设置在框的左侧。 – zur4ik

添加原因选民.... – Sandesh

-1

将填充添加到左侧。

.element { 
    padding-left:4px; 
}

DEMO here.

来源

2013-12-14 09:06:05 Hiral

这是做同样的。顶部和底部边界从左边界切出2个像素。 – zur4ik

这应该解决的问题：

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

来源

2015-04-15 17:16:49 Insider

如何设置CSS左边框盒

回答

相关问题