Analyse du contour en CSS (avec exemples)

Le contenu de cet article concerne l'analyse du contour en CSS (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans l'implémentation de la méthode CSS de changement de couleur du bouton radio, nous souhaitons simuler l'effet du bouton radio natif qui obtient le focus via la touche Tab. Cela implique un attribut qui. est souvent ignoré. —— Aperçu, puisque mon impression précédente était effectivement un peu vague, cet article a l'intention d'en mener une étude un peu approfondie ^_^

Spec le décrit ainsi

La fonction

est utilisée pour créer le contour d'objets visuels (bordure-boîte d'éléments), tels que les contours des boutons de formulaire, etc.

Différent de la bordure

1. Le contour n'occupe pas l'espace du document

2.

Description d'attribut spécifique

/* 轮廓线颜色 
 * 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>

Le diable est dans les détails

Compatibilité

décrite comme spécification CSS2.1, donc IE6 /7/8(Q) ne sont pas pris en charge. L'écriture du DOCTYPE correct sous IE8 prend en charge l'attribut outline.
outline-offset n'est pas pris en charge dans IE.

Masquer le contour sous IE6/7/8(Q)

Pour masquer l'effet de contour sous IE6/7/8(Q), ajoutez simplement l'attribut hideFocus à l'élément.

La différence entre outline:0 et outline:none

Exécutez le code suivant sous Chrome

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

Le résultat :

.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 is only La définition d'un ou de plusieurs attributs de contour spécifiques fournit uniquement une API plus pratique, donc outline:0 et outline:none ont essentiellement le même effet.

Je ne peux vraiment pas créer de coins arrondis

Comme nous avons border-radius, nous pouvons utiliser CSS pour créer des rectangles arrondis, des cercles et d'autres graphiques, et même une boîte -shadow est également affecté par le rayon de bordure pour obtenir des ombres d'éléments et des coins arrondis. Alors, le contour peut-il également créer des coins arrondis ? La réponse est non. En effet, la fonction du contour est de délimiter l'espace occupé par l'élément. Bien que l'arrondi visuel graphique soit obtenu via le rayon de bordure, la position et l'espace occupés par l'élément n'ont pas changé du tout, et il est toujours carré angulaire. .

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

Différences dans les contours

Sous Chrome, le contour se limite à identifier l'élément actuel lui-même. L'espace de position occupé (border-box), mais sous FireFox, il inclut l'espace de position occupé par les éléments descendants.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!