CSS разделяет границы цветов

88
13

Мне трудно понять, как применить разделительную рамку к элементу с помощью CSS.


Эффект, который я пытаюсь достичь, таков:


enter image description here


Если красная линия и серая линия занимают% от ширины элементов. Предпочтительно, я хотел бы применить этот эффект к элементу с использованием одного класса.


Изменить: для тех, кто запрашивает образец кода:


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

спросил(а) 2013-02-25T17:13:00+04:00 7 лет, 4 месяца назад
1
Решение
76

Красный текст и красная подчеркивание? Для этого есть простой 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-25T17:18:00+04:00 7 лет, 4 месяца назад
38

Хорошо, я сделал подобный, но меня попросили по вертикали, но теперь я изменяю направление градиента, чтобы он помог вам


Демо (работает в Chrome, если кто-то знает Cross-Browser, пожалуйста Не стесняйтесь редактировать, потому что я использую старые браузеры, чтобы их не удалось проверить)

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-25T17:28:00+04:00 7 лет, 4 месяца назад
38

Вы также можете попробовать сыграть с :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-25T17:27:00+04:00 7 лет, 4 месяца назад
39

Ну, предполагая, что вы хотите использовать один класс и не видя свою точную разметку, это будет работать:


<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.

ответил(а) 2013-02-25T17:19:00+04:00 7 лет, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема