CSS分割边框颜色

Question

我在使用CSS时遇到了一个问题，无法确定如何对元素应用分割边框。

我想要实现的效果如下所示：

其中红线和灰线占元素宽度的一定百分比。最好能够通过一个单一的类来实现这种效果。

编辑： 对于那些要求代码示例的人：

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

- Sinmok

---

请展示你的代码，HTML/CSS。 - Lowkase

你能不能把它们放在不同的容器（例如spans）中，每个容器都有自己的边框？这样应该可以得到你想要的效果。你甚至可以添加一个整体容器来防止单词换行，并将它们放在一起定位。我认为分割边框甚至是不可能的。 - Pieter

Answer 1

想要红色文本和下划线？有一些简单的CSS可以实现。

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

- FiniteLooper

---

为什么推荐使用内联样式？ - BenM

将其连接到样式表中的类，而不是内联CSS。 - s.lenders

这只是一个例子，我并不是说内联样式比其他任何东西都要好。只是展示了如何实现他想要的效果。 - FiniteLooper

内联样式使代码示例更难阅读，因为你被迫滚动。 - cimmanon

好的，我已经将其分成多行。希望这样更容易理解。 - FiniteLooper

Answer 2

好的，假设你想使用一个单一的类，并且没有看到你确切的标记，这将起作用：

<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演示。

- BenM

---

那非常接近了。如果我想让第二个单词的底部边框跨越其余容器，我需要更改什么？ - Sinmok

只需将 display: block; float: left 添加到 span 中，然后为每个 span 指定一个宽度即可。 - BenM

Answer 3

你也可以尝试使用: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/

- dfsq

Answer 4

好的，我已经制作了一个类似的但是那个是要求垂直的，但现在我正在改变渐变方向以便帮助你

演示（适用于Chrome，如果有人知道跨浏览器，请随意编辑，因为我使用旧浏览器所以无法测试）

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

- Mr. Alien

---

是的。最后一个单词中的D是不同颜色的，但仅此而已。 - Sinmok

@Sinmok 看一下，你认为这个有问题吗？http://jsfiddle.net/guvdU/3/ 这是预览 http://imgur.com/QhuLTU8 - Mr. Alien

关于跨浏览器渐变，请查看此处：http://www.colorzilla.com/gradient-editor/ - Pieter

@Pieter 不是用于跨浏览器渐变，而是用于剪辑和填充颜色，但即便如此，也有一定帮助。我认为我可以更改前缀，但无法测试它们。 - Mr. Alien

请告诉我为什么会出现-1。 - Mr. Alien