CSS拆分邊框顏色

我無法弄清楚如何在使用CSS的元素上應用拆分邊框。CSS拆分邊框顏色

我想要達到的效果是這樣的：

enter image description here

當紅線與灰線佔用元素％的寬度。我希望將這種效果應用於使用單個類的元素。

編輯：對於那些尋求一個代碼示例：

<!-- spans width 100% --> 
<div id="wrapper"> 
    <h1 class="title">DDOS Protection </h1> 
</div>

來源

2013-02-25 Sinmok

向我們展示你的代碼，HTML/CSS – Lowkase 2013-02-25 14:15:02

你就不能把它們放在不同的容器中（即跨度）用自己的邊境？這應該可以帶來理想的效果。你甚至可以添加一個整體容器，以防止文字中斷並將它們放在一起。我不認爲分裂邊界甚至是可能的。 – Pieter 2013-02-25 14:16:52

紅色文字和紅色下劃線？這裏有一些簡單的CSS。

<span style='color:red; border-bottom: 1px solid red;'>DDOS</span> 
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>

來源

2013-02-25 14:18:32

爲什麼推薦內聯樣式？ – BenM 2013-02-25 14:19:23

或將它連接到樣式表中的類而不是內聯CSS – 2013-02-25 14:19:34

這僅僅是一個示例，我並不是說內聯樣式比其他任何樣式都好。只是展示如何達到他想要的效果。 – 2013-02-25 14:33:00

好吧，假設你想使用一個類，並沒有看到你確切的標記，這將工作：

<div class="message"> 
    <span>DDOS</span> 
    <span>Protection</span> 
</div>

然後你的CSS看起來是這樣的：

.message span { 
    border-bottom: 1px solid #ccc; 
    padding-bottom: 5px; 
    color: #ccc; 
} 
    .message span:first-child { 
     border-bottom-color: red; 
     color: red; 
     margin-right: 10px; 
    }

這是jsFiddle demo。

來源

2013-02-25 14:19:04 BenM

這非常接近。如果我想讓第二個單詞的下邊框跨越容器的其餘部分，我需要更改哪些內容？ – Sinmok 2013-02-25 14:34:00

只需添加'display：block; float：left'到跨度，然後爲每個跨度指定一個寬度。 – BenM 2013-02-25 14:35:12

您也可以嘗試用:before和:after玩：

.line { 
    background-color: #DDD; 
    padding: 5px 10px; 
    position: relative; 
} 
.line:before, .line:after { 
    content: ''; 
    width: 10%; 
    height: 2px; 
    background-color: red; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
.line:after { 
    width: 90%; 
    background-color: green; 
    left: 10%; 
}

http://jsfiddle.net/DHDuw/

來源

2013-02-25 14:27:33 dfsq

好，我做了一個類似但被要求垂直，但現在我改變了梯度方向，它會幫助你

Demo（作品在鉻，如果任何人知道跨瀏覽器，請隨時編輯，因爲正在使用舊瀏覽器因此將無法進行測試）

CSS

div { 
    font: 40px Arial; 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

來源

2013-02-25 14:28:29

這看起來並不正確。 – Sinmok 2013-02-25 14:35:10

@Sinmok你使用過最新的Chrome嗎？ – 2013-02-25 14:36:04

是的。最後一句話中的D是一種不同的顏色，但這是關於它的。 – Sinmok 2013-02-25 14:38:10

CSS拆分邊框顏色

回答

相關問題