Hjerneslag - CSS-triks

Anonim

Den strokeeiendom i CSS er for å legge til en ramme på SVG-figurer.

.module ( stroke: black; )

Huske:

  • Dette vil overstyre en presentasjon attributt
  • Dette overstyrer ikke en innebygd stil, f.eks

Verdier

Den strokeegenskapen kan akseptere noe CSS fargeverdi.

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

Fantastisk nok, strokegodtar også mønstrene til SVG-figurer som er definert inne i et defselement:

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

Se pennestrøk-egenskapen av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

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

Mer informasjon

  • SVG 1.1 spesifikasjon
  • MDN på fyll og slag

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja