2邊框，層次和不同的顏色，寬度和高度

不知道如何來形容它，所以這裏是一個事先知情同意：2邊框，層次和不同的顏色，寬度和高度

enter image description here

這是我到目前爲止已經試過，但跨度不可見。

.border{ 
    border-bottom: 1px solid #666; 
    width:400px; 
    position:relative; 
} 
.border span{ 
    border-bottom:4px solid red; 
    display:inline-block; 
    width:50px; 
    position:absolute; 
    left:48%; 
    bottom:-4px; 
}

來源

2014-05-14 Andres

你能進一步解釋你想有什麼用？它應該是一個靜態元素，某種進度條還是一個花哨的邊框？另外，你打算在這個「跨度」內放置一些內容嗎？你的HTML是什麼樣的？ – Luciano

你所擁有的CSS確實描繪了什麼，那麼問題是什麼？這裏是一個小提琴http://jsfiddle.net/5K9eu/ –

@布萊恩，如果你看看那個jsfiddle和圖像是不一樣的。側面的線應該對齊紅線的中間。 – Andres

好吧，試試這個：

HTML：

<div class="border"></div>

CSS：

.border{ 
    width:400px; 
    height: 1px; /* instead of border */ 
    background: #666; 
    position:relative; 
} 

/* pseudo-element instead of span for cleaner HTML */ 
.border:before { 
    content: ''; 
    border-bottom:4px solid red; 
    display:inline-block; 
    width:50px; 
    position:absolute; 
    left:48%; 
    top:-2px; /* instead of bottom, go top by half the height */ 
}

來源

2014-05-14 15:03:48 RazvanDH

謝謝，我用幾乎相同的答案使用了僞元素。刪除我的答案，所以我可以選擇你的，並給你信用:) – Andres

由余量替換底部：

.border span{ 
    border-bottom:4px solid red; 
    display:inline-block; 
    width:50px; 
    position:absolute; 
    left:48%; 
    margin-bottom:-2px; 
}

來源

2014-05-14 14:24:55 JoseAPL

嘗試這種 CSS div.container {邊框頂：固體1px的紅色;填充：0像素;} div.inside {高度：100％ ;寬度：100％;邊框頂：2px的固體紅色;餘量：0像素;}

HTML

內容

我還沒有測試，但它應該工作

來源

2014-05-14 14:30:38 patrick

2邊框，層次和不同的顏色，寬度和高度

回答

相關問題