Ширина на хода - CSS-трикове

Anonim

В stroke-widthимота в CSS е за настройка на ширината на границата на SVG форми.

.module ( stroke-width: 2; )

Помня:

  • Това ще замени атрибута на презентацията
  • Това няма да замени вградения стил, напр

Стойности

В stroke-widthимота може да приеме всяко число, включително и цели числа, десетични дроби и проценти:

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

Имайте предвид, че идентификаторът на единица (т.е. pxи em) не се изисква. Число без единици е стойност, базирана на координатната система на SVG viewBox. Така например, 5прави същото като 5%в a, viewBoxкойто е зададен на 0 0 100 100(5/100 = .05 или 5%), но 10%в такъв, който е 0 0 50 50(5/50 = .1 или 10%).

Вижте свойството Pen-width-width от CSS-Tricks (@ css-tricks) на CodePen.

Свързани

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

Повече информация

  • SVG 1.1 Спецификация
  • MDN при запълване и щрихи

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Да Да Да Да 9+ 4.4+ Да