Lebar pukulan - Trik CSS

Anonim

The stroke-widthharta di CSS adalah untuk menetapkan lebar sempadan pada bentuk SVG.

.module ( stroke-width: 2; )

Ingat:

  • Ini akan mengatasi atribut persembahan
  • Ini tidak akan mengatasi gaya sebaris misalnya

Nilai

Tempat stroke-widthpenginapan ini boleh menerima sebarang nombor, termasuk nombor bulat, perpuluhan, dan peratusan:

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

Perhatikan bahawa pengecam unit (iaitu pxdan em) tidak diperlukan. Nombor tanpa unit adalah nilai berdasarkan sistem koordinat SVG viewBox. Jadi, sebagai contoh, 5menghasilkan sama seperti 5%pada viewBoxyang ditetapkan ke 0 0 100 100(5/100 = .05 atau 5%) tetapi 10%pada yang itu 0 0 50 50(5/50 = .1 atau 10%).

Lihat harta seluas pena oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

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

Maklumat lanjut

  • SVG 1.1 Spesifikasi
  • MDN mengenai pengisian dan pukulan

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Ya Ya Ya Ya 9+ 4.4+ Ya