Analyse der Gliederung in CSS (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Analyse von Gliederungen in CSS (mit Beispielen). Freunde in Not können darauf verweisen.

Bei der Implementierung der CSS-Methode zum Ändern der Optionsfeldfarbe möchten wir den Effekt simulieren, dass das native Optionsfeld durch die Tabulatortaste den Fokus erhält wird oft ignoriert. ——Umriss, da mein bisheriger Eindruck davon tatsächlich etwas vage war, möchte dieser Artikel eine etwas eingehendere Untersuchung durchführen^_^

Spec beschreibt es so

Funktion

wird verwendet, um den Umriss von visuellen Objekten (Rahmen von Elementen) zu erstellen, wie z. B. Umrisse von Formularschaltflächen usw.

Anders als Rand

1. Umriss ist nicht unbedingt ein Rechteck.

Spezifische Attributbeschreibung

/* 轮廓线颜色 
 * invert表示为颜色反转，即使轮廓在不同的背景颜色中都可见 
 */
outline-color: invert | <color_name> | <hex_number> | <rgb_number> | inherit
/* 轮廓线样式 */
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
/* 轮廓线宽度 */
outline-width: medium | thin | thick | <length> | inherit
/* 一次性设置轮廓线的颜色、样式 和 宽度 */
outline: <outline-color> <outline-style> <outline-width>;
/* 轮廓线的偏移量，大于0则轮廓扩大，小于0则轮廓缩小 */
outline-offset: 0px;</outline-width></outline-style></outline-color></length></rgb_number></hex_number></color_name>

Der Teufel steckt im Detail

Kompatibilität

Umriss als CSS2.1-Spezifikation, also IE6 /7 /8(Q) wird nicht unterstützt. Das Schreiben des richtigen DOCTYPE unter IE8 unterstützt das Gliederungsattribut.

Outline-Offset wird im IE nicht unterstützt.

Umriss unter IE6/7/8(Q) ausblenden

Um den Umrisseffekt unter IE6/7/8(Q) auszublenden, fügen Sie einfach das Attribut hideFocus zum Element hinzu.

Der Unterschied zwischen Gliederung:0 und Gliederung:none

Führen Sie den folgenden Code unter Chrome aus

<style>
 .outline0{
   outline: 0;
 }
 .outline-none{
   outline: none;
 }
</style>
<a>outline: 0</a>
<a>outline: none</a>
<script>
  const $ = document.querySelector.bind(document)
  const print = console.log.bind(console)
  const cssProps = ["outline-width", "outline-style", "outline-color"]
  const slctrs = [".outline0", ".outline-none"]
     
  slctrs.forEach(slctr => {
    styles = window.getComputedStyle($(slctr))
      cssProps.forEach(cssProp => {
        print("%s, %s is %s", slctr, cssProp, styles[cssProp])
      })
    })
</script>

Das Ergebnis:

.outline0, outline-width is 0px
.outline0, outline-style is none
.outline0, outline-color is rgb(0, 0, 238)
.outline-none, outline-width is 0px
.outline-none, outline-style is none
.outline-none, outline-color is rgb(0, 0, 238)

outline dient nur zur Einstellung einzeln oder mehrfach Ein bestimmtes Gliederungsattribut stellt nur eine bequemere API bereit, sodass Gliederung:0 und Gliederung:none im Wesentlichen den gleichen Effekt haben.

Ich kann wirklich keine abgerundeten Ecken erstellen

Da wir border-radius haben, können wir CSS verwenden, um abgerundete Rechtecke, Kreise und andere Grafiken und sogar Boxen zu erstellen -shadow wird auch vom Randradius beeinflusst, um den Effekt von Elementschatten und abgerundeten Ecken zu erzielen. Kann der Umriss also auch abgerundete Ecken erzeugen? Die Antwort ist nein. Das liegt daran, dass die Funktion des Umrisses darin besteht, den vom Element eingenommenen Raum zu umreißen. Obwohl die grafische visuelle Abrundung durch den Randradius erreicht wird, haben sich die Position und der vom Element eingenommene Raum überhaupt nicht geändert und es ist immer noch eckig .

<style>
  .round{
    width: 100px;
    height: 100px;
    background: yellow;
    border-radius: 50%;
    outline: solid 1px red;
  }
</style>

Unterschiede im Umriss

Unter Chrome beschränkt sich der Umriss auf die Identifizierung des von der eingenommenen Bereichs Aktuelles Element selbst (Rahmenfeld), aber unter FireFox umfasst es den Positionsraum, der von untergeordneten Elementen eingenommen wird.

<style>
  .outline{
    width: 13px;
    height: 13px;
    outline: 1px solid red;
  }
</style>
<p></p>
<script>
  const el = document.querySelector(".outline")
  el.textContent = !!~navigator.appVersion.indexOf("Chrome") ? "Chrome" : "FireFox"
</script>

Das obige ist der detaillierte Inhalt vonAnalyse der Gliederung in CSS (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!