attribut de contour CSS3

Quand je lisais des articles liés à CSS3, j'ai vu un effet de signe "+" plus en utilisant les styles CSS

Ici, je suis entré en contact avec un nouvel attribut CSS3, outline, qui traduit en chinois est - " outline ";

Syntaxe : outline:outlineWidth outlineStyle outlineColor;

Par exemple : outline:5px solid blue;

Et d'après mon test, les 5px ici, unis et bleus peuvent être échangés à volonté sans affecter l'effet d'affichage

De plus, cet attribut ne fait pas partie du modèle de boîte, il n'occupe donc pas d'espace et ; n'a pas besoin d'être calculé lors de son utilisation. La largeur, la hauteur et d'autres valeurs

sont également prises en charge par les navigateurs : ie8+ et d'autres navigateurs grand public. Firefox prend même en charge outline-radius, qui est identique à border-radius

.

En regardant l'exemple "+",

<p>第一个方法是使用outline－offset的向内偏移结合border实现的，不兼容所有IE，safari上也有点问题，要用chrome查看才行</p>
<p class="use-outline-offset"></p>


<style>
.use-outline-offset{
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  border:40px solid #000000;
  background-color:#cccccc;
  outline-width:40px;
  outline-style:dotted;
  outline-offset:-80px;
  box-sizing: border-box;
}
</style>

mentionne également un attribut : outline-offset, qui est le décalage du contour, valeurs négatives ​sont pris en charge ici. Cela me rappelle les chemins de l'IA et les chemins décalés. Les valeurs négatives sont décalées vers l'intérieur. Par conséquent, l'effet de signe "+" est implémenté ; l'attribut

outline-offset est pris en charge par tous les navigateurs grand public, à l'exception d'IE (après test, il n'est en effet pas pris en charge).

Mais cet attribut ne prend pas très bien de place, il peut améliorer l'efficacité du travail et, combiné avec le décalage de contour, peut produire des effets inattendus

 ;

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!