Est-il possible d'imiter la bordure de crête CSS, mais avec des couleurs personnalisées?

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

  •  08-07-2019
  •  | 
  •  

Question

Je souhaite essentiellement avoir une "crête". bordure de style mais avec des couleurs personnalisées. Avec border-style: ridge , il semble que vous ne puissiez pas mettre différentes couleurs, le navigateur en utilise simplement une légèrement plus claire et une légèrement plus sombre que la couleur spécifiée.

Ma solution actuelle est la suivante, mais elle n’est pas idéale en raison du < div > supplémentaire 

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

L'élément suivant situé en dessous de cet élément ne peut pas avoir sa bordure supérieure définie sur cette couleur (il a ses propres styles et est séparé), cette idée est donc perdue. Y a-t-il autre chose que je puisse essayer?

Était-ce utile?

La solution

Votre exemple semble suggérer que vous souhaitiez créer une ligne striée servant de séparateur entre votre en-tête et le reste, plutôt qu'une bordure striée autour d'un élément. Pourquoi n'utilisez-vous pas un hr pour cela, puisque c'est à peu près exactement ce à quoi il sert?

Vous pouvez ensuite lui attribuer une bordure et définir vos propres couleurs des différents côtés.

Autres conseils

Non conforme aux spécifications de CSS 3 (section 8.5.3):

  

La couleur des bordures dessinées pour les valeurs   de 'groove', 'ridge', 'inset', et   'départ' dépend de l'élément   propriétés de couleur de bordure, mais les UA peuvent   choisir leur propre algorithme   calculer les couleurs réellement utilisées.

Techniquement, je suppose que "choisissez son propre algorithme". Cela peut impliquer d'autoriser le développeur à les définir, mais aucun agent d'utilisateur ne semble le faire à ce stade. Bien sûr, même s’ils le faisaient, vous auriez une solution pour ce moteur de rendu uniquement.

Il n’existe aucun moyen officiel de le faire, mais vous pouvez probablement en imiter l’effet. Une bordure striée n’est en réalité qu’une bordure incrustée, elle-même entourée d’une bordure de départ (elle-même simplement une bordure pleine avec des couleurs légèrement différentes pour les bords gauche / haut et bas / droite).

Quelque chose dans ce sens devrait vous donner une idée assez précise de ce que vous voulez ou de ce que vous cherchiez. 

 .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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top