É possível fronteira cume CSS imitar, mas com cores personalizadas?

Question

I essencialmente deseja ter uma beira do estilo "cume", mas com cores personalizadas. Com border-style: ridge parece que você não pode colocar cores diferentes em, o navegador usa apenas um pouco mais leve e um pouco mais escura do que a cor especificada.

Minha solução atual é isso, mas não é ideal devido à <div> adicional

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

O próximo item abaixo deste não pode ter o seu conjunto borda superior para que a cor (ele tem seus próprios estilos e é separado), de modo que a idéia está fora. É outra coisa lá qualquer coisa que eu posso tentar?

Answer 1

O seu exemplo parece sugerir que você deseja criar uma linha ondulada como um separador entre o cabeçalho e o resto, em vez de uma borda ondulada em torno de um elemento. Por que você não usar um hr para isso, já que é muito bonito exatamente o que é para?

Você pode, então, dar-lhe uma borda e definir suas próprias cores nos lados diferentes.

Answer 2

Não pela especificação para CSS 3 (Seção 8.5.3):

A cor das fronteiras desenhadas para valores de 'groove', 'cume', 'inserção', e 'Início' depende do elemento beira propriedades de cor, mas pode UEA escolher o seu próprio algoritmo para calcular as cores reais usadas.

Tecnicamente eu suponho que "escolher o seu próprio algoritmo" poderia envolver permitindo que o desenvolvedor para defini-los, mas não user-agent parece fazer isso neste momento. É claro que, mesmo que eles fizeram, você teria uma solução apenas para que o motor de renderização.

Answer 3

Não há nenhuma maneira oficial para fazer isso, mas você provavelmente poderia imitar o efeito. A fronteira ridged é realmente apenas uma fronteira de inserção que em si tem uma fronteira início em torno dele (que por sua vez é apenas uma borda sólida com um pouco diferentes cores de borda para a esquerda / superior e / canto inferior direito).

algo nesse sentido deverá fazê-lo uma boa aproximação muito do que você quer, ou exatamente o que você estava procurando.

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