Можно ли имитировать границу хребта CSS, но с пользовательскими цветами?

Question

Я по существу желаю иметь границу «хребта», но с пользовательскими цветами. С border-style: ridge кажется, что вы не можете поместить разные цвета, браузер просто использует один чуть светлее и один чуть более темный, чем указанный цвет.

Мое текущее решение, но он не идеален из-за дополнительного <div>

<div id="header"> 
    <!-- block with border-bottom set to `1px solid #2e3436`--> 
</div> 
<div style="height: 1px; background-color: #fbe995;"></div> 

следующий пункт ниже, это не может быть его верхняя граница в этот цвет (у него есть свои собственные стили и отдельно), так что идея отсутствует. Есть ли что-нибудь еще, что я могу попробовать?

Answer 1

Ваш пример наводит на мысль, вы хотите создать ребристую линию в качестве разделителя между вашим заголовком и остальным, а не остроконечной границы вокруг элемента. Почему вы не используете для этого hr, так как это в значительной степени то, для чего оно предназначено?

Затем вы можете дать ему границу и установить свои собственные цвета с разных сторон.

Answer 2

Не в спецификации для CSS 3 (раздел 8.5.3):

цвета границ обращаются для значений из 'канавки', 'хребта', 'вставки' ​​и 'боковик' зависит от свойств цвета границы раздела , но UA могут выбрать свой собственный алгоритм до рассчитать фактические используемые цвета.

Технически я полагаю, что «выбрать собственный алгоритм» может потребовать, чтобы разработчик установил их, но на данный момент никакой пользовательский агент не делает этого. Конечно, даже если бы они это сделали, у вас было бы решение только для этого механизма рендеринга.

Answer 3

Нет официального способа сделать это, но вы, вероятно, могли бы имитировать эффект. Обрезанная граница - это просто рамка вставки, которая сама имеет переднюю границу вокруг нее (которая, в свою очередь, представляет собой сплошную границу с немного разными цветами границы для левого/верхнего и нижнего/правого).

Что-то в этом направлении должно помочь вам получить хорошее приближение к тому, что вы хотите, или именно то, что вы искали.

.inset{ 
     margin:0px; 
     border: 1px inset #abc; 
} 
.outset{ 
     padding:0px; 
     border:1px outset #cba; 
} 

<div class='outset'> 
    <div class='inset'> 
      content goes here 
    </div> 
</div> 

Answer 4

<style> 
.a 
{ 
     border: solid yellow 2px; 
     border-top-color:red; 
     border-left-color:red; 

} 
.b 
{ 
     border: solid red 2px; 
     border-top-color:yellow; 
     border-left-color:yellow; 
} 
</style> 
<div class='a'> 
    <div class='b'> 
     some text 
    </div> 
</div>