Можно ли имитировать границу гребня CSS, но с помощью пользовательских цветов? - PullRequest
Новая
       8

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

0 голосов
/ 29 ноября 2009

Я бы хотел, чтобы у меня была граница в стиле «хребет», но с пользовательскими цветами. С 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>

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

Ответы [ 4 ]

2 голосов
/ 29 ноября 2009

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

Цвет границ, нарисованных для значений «канавка», «гребень», «вставка» и 'outset' зависит от элемента свойства цвета границы, но UA могут выбрать свой алгоритм рассчитать фактические цвета.

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

1 голос
/ 29 ноября 2009

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

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

1 голос
/ 29 ноября 2009

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

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

 .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>
0 голосов
/ 29 ноября 2009 
<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>
...