Stroke-width - Trik CSS

Anonim

The stroke-widthproperti di CSS adalah untuk pengaturan lebar perbatasan pada bentuk SVG.

.module ( stroke-width: 2; )

Ingat:

  • Ini akan menggantikan atribut presentasi
  • Ini tidak akan menimpa gaya sebaris misalnya

Nilai

The stroke-widthproperti dapat menerima angka apapun, termasuk seluruh nomor, desimal, dan persentase:

  • stroke-width: 2px
  • stroke-width: 2em
  • stroke-width: 2
  • stroke-width: 2.5
  • stroke-width: 15%

Perhatikan bahwa pengenal unit (yaitu pxdan em) tidak diperlukan. Angka tanpa satuan adalah nilai berdasarkan sistem koordinat SVG viewBox. Jadi, misalnya, 5merender sama seperti 5%di a viewBoxyang diatur ke 0 0 100 100(5/100 = .05 atau 5%) tetapi 10%di salah satunya 0 0 50 50(5/50 = .1 atau 10%).

Lihat properti Pen stroke-width oleh CSS-Tricks (@ css-trick) di CodePen.

Terkait

  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap

Informasi Lebih Lanjut

  • Spesifikasi SVG 1.1
  • MDN pada isian dan guratan

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Iya Iya Iya Iya 9+ 4.4+ Iya