Beroerte - CSS-trucs

Anonim

De strokeeigenschap in CSS is voor het toevoegen van een rand aan SVG-vormen.

.module ( stroke: black; )

Onthouden:

  • Dit heeft voorrang op een presentatiekenmerk
  • Dit heeft geen voorrang op een inline stijl, bijv

Waarden

De strokeeigenschap kan elke CSS-kleurwaarde accepteren.

  • Benoemde kleuren - orange
  • Hex-kleuren - #FF9E2C
  • RGB- en RGBa-kleuren - rgb(255, 158, 44) and rgba(255, 158, 44, .5)
  • HSL en HSLa kleuren - hsl(32, 100%, 59%) and hsla(32, 100%, 59%, .5)

Geweldig genoeg, strokeaccepteert ook de patronen van SVG-vormen die binnen een defselement zijn gedefinieerd :

.module ( stroke: url(#pattern); )

Zie de eigenschap Penstreep door CSS-Tricks (@ css-tricks) op CodePen.

Verwant

  • fill
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap
  • stroke-width

Meer informatie

  • SVG 1.1-specificatie
  • MDN op vullingen en slagen

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja