Stroke
📌 مفهوم
ویژگی stroke در CSS مشخص میکند رنگ خط یا حاشیه اطراف شکل SVG چگونه باشد.
-
فقط روی عناصر SVG قابل استفاده است (مثل
<circle>,<rect>,<path>). -
مشابه
fillاست ولی برای خط بیرونی شکل به جای داخل آن.
📑 مقادیر CSS
| مقدار | توضیح |
|---|---|
<color> | هر رنگ CSS معتبر مثل red, #FF0000, rgb(255,0,0) |
none | هیچ خطی کشیده نمیشود (شفاف) |
currentColor | از رنگ فعلی متن (color) عنصر استفاده میکند |
مثال CSS:
🏷 Tailwind CSS
Tailwind کلاسهای آماده برای stroke دارد:
| کلاس | توضیح |
|---|---|
stroke-current | رنگ خط از currentColor میگیرد |
stroke-transparent | شفاف، خط ندارد |
stroke-[color] | هر رنگ دلخواه، به صورت utility custom color (مثلاً stroke-red-500) |
stroke-0, stroke-1, ... | ضخامت خط SVG (stroke-width) |
مثال Tailwind:
💡 نکته: معمولا
fillوstrokeبا هم استفاده میشوند تا شکلها هم رنگ داخل و هم رنگ خط داشته باشند.
HTML
Tailwind Css
Bootstrap 5
Java script
++C
Python
Three.js
Gsap
Sass
SQL
React