Ist es möglich, CSS Grat Grenze, aber mit benutzerdefinierten Farben zu imitieren?

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

  •  08-07-2019
  •  | 
  •  

Frage

Ich möchte im Wesentlichen eine „Grat“ Stil Grenze haben, aber mit benutzerdefinierten Farben. Mit border-style: ridge es scheint, dass Sie nicht verschiedene Farben setzen können, nur der Browser verwendet man etwas heller und ein wenig dunkler als die Farbe angegeben.

Meine aktuelle Lösung ist das, aber es ist nicht ideal aufgrund des zusätzlichen <div> 

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

Der nächste Punkt unterhalb diesem nicht seine obere Grenze hat auf diese Farbe (es seinen eigenen Stil und ist getrennt), so dass Idee heraus ist. Gibt es etwas, was ich kann versuchen?

War es hilfreich?

Lösung

Ihr Beispiel scheint, dass Sie vorschlagen wollen eine geriffelte Linie als Trennzeichen zwischen Ihrem Kopf und dem Rest, anstatt ein geriffelten Rand um ein Element zu erstellen. Warum Sie kein hr dafür verwenden, denn das ist so ziemlich genau das, was es ist?

Sie können es dann eine Grenze geben, und Ihre eigenen Farben auf den verschiedenen Seiten festgelegt.

Andere Tipps

Nicht gemäß der Spezifikation für CSS 3 (Abschnitt 8.5.3):

  

Die Farbe der Grenzen für Werte gezeichnet   von ‚Nut‘, ‚ridge‘, ‚Einsatz‘ und   ‚Anfang‘ ist abhängig von dem Elemente   Grenzfarbeigenschaften, aber UAs kann   wählen, um ihre eigenen Algorithmus   berechnet die tatsächlichen Farben verwendet.

Technisch Ich nehme an, dass „ihren eigenen Algorithmus wählen“ beinhalten könnte so dass der Entwickler sie setzen, aber keine User-Agent scheint, dass an dieser Stelle zu tun. Natürlich, auch wenn sie es taten, nur dass Rendering-Engine, eine Lösung für haben würde.

Es gibt keinen offiziellen Weg, dies zu tun, aber Sie könnten wahrscheinlich die Wirkung nachahmen. Eine geriffelte Grenze ist wirklich nur ein Einsatz Grenze, die selbst einen Anfang Rahmen um es hat (was wiederum nur eine feste Grenze mit leicht unterschiedlichen Rahmenfarben für links / oben und unten / rechts).

Etwas in dieser Richtung sollten Sie eine ziemlich gute Annäherung an das bekommen, was Sie wollen, oder genau das, was Sie suchen. 

 .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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top