Інсульт - CSS-хитрощі

Anonim

strokeВластивість в CSS для додавання кордону до SVG форм.

.module ( stroke: black; )

Запам’ятайте:

  • Це буде перевизначити атрибут уявлення
  • Це не замінить вбудований стиль, наприклад

Цінності

strokeВластивість може приймати будь-яке значення CSS кольору.

  • Названі кольори - orange
  • Шестигранні кольори - #FF9E2C
  • Кольори RGB та RGBa - rgb(255, 158, 44) and rgba(255, 158, 44, .5)
  • Кольори HSL та HSLa - hsl(32, 100%, 59%) and hsla(32, 100%, 59%, .5)

Досить дивовижно, він strokeтакож приймає шаблони форм SVG, які визначені всередині defsелемента:

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

Перегляньте властивість «Обведення пера» від CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

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

Більше інформації

  • SVG 1.1 Специфікація
  • MDN на заливки та штрихи

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Так Так Так Так 9+ 4,4+ Так