如何設置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左邊框盒

回答

相關問題