CSS3-Outline-Attribut

Als ich Artikel im Zusammenhang mit CSS3 las, sah ich einen „+“-Pluszeicheneffekt bei der Verwendung von CSS-Stilen

Hier stieß ich auf ein neues CSS3-Attribut, Gliederung, das ins Chinesische übersetzt lautet: „ Outline ";

Syntax: Outline:outlineWidth OutlineStyle OutlineColor;

Zum Beispiel: Outline:5px einfarbig;

Und laut meinem Test, Die 5 Pixel hier, einfarbig und blau können nach Belieben ausgetauscht werden, ohne dass sich dies auf den Anzeigeeffekt auswirkt Breite, Höhe und andere Werte müssen bei der Verwendung nicht berechnet werden.

werden auch von Browsern unterstützt: ie8+ und anderen Mainstream-Browsern. Firefox unterstützt sogar den Outline-Radius, der mit dem Border-Radius identisch ist

.

Ausgehend vom „+“-Beispiel erwähnt

auch ein Attribut: Outline-Offset, das den Outline-Offset und negative Werte darstellt ​werden hier unterstützt. Das erinnert mich an Pfade in der KI und versetzte Pfade. Negative Werte werden nach innen verrechnet. Daher ist der „+“-Zeicheneffekt implementiert; das Attribut

outline-offset wird von allen gängigen Browsern außer IE unterstützt (nach Tests wird es tatsächlich nicht unterstützt).

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

Aber dieses Attribut nimmt nicht viel Platz ein, es kann die Arbeitseffizienz verbessern und in Kombination mit dem Umrissversatz einige unerwartete Effekte erzielen

Das obige ist der detaillierte Inhalt vonCSS3-Outline-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!