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

StackOverflow https://stackoverflow.com/questions/1816123

  •  08-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

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

Другие советы

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

  

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

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

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

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

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

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top