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拆分边框颜色

回答

相关问题