معرفی خصیصه stroke در css3

[tamafi6]

باسلام
یکی ازخصوصیاتی که درcss3 کمتربه اون پرداخته شده است خصیصه stroke میباشد که برای کشیدن خط و حاشیه برروی عناصری که به صورت svg ساخته شده میپردازد کاراین کد همانند border درcss میباشد ولی مزیت های دیگراون نمایش به صورت افکت وداینامیک بودن این تکه کدهست ودیگراحتیاجی به جاوااسکریپت نمیباشد
مثال


stroke: #e74c3c;
stroke-width: 2;

که خط اول رنگ حاشیه وخط دوم قطر حاشیه میباشد
این خصیصه توابع متعددی رادربرمیگیره که میتوان به نمونه های زیرکه بیشترین کاربردرا دارد اشاره کرد


fill: #fff;

رنگ پس زمینه عنصر


stroke-dasharray: 580;

مقدارسرعت درپیشروی حرکت ازنقطه آغاز


stroke-dashoffset: 580;

نقطه شروع حاشیه
معمولا مقداراین خصوصیتها باید باهم برابرباشند


writing-mode:lr-tb;
وحرکت ازسمت موردنظرازسمت چپ ویاراست
بااستفاده ازکلاس hover میتوان کلاس های دیگری به عنصرمورد نظر افزود که نمای المان وعنصر رادارای افکت وجلوه های بصری دیگر نمود
نمونه های ساخته شده درلینک زیر
نمونه (http://pacifist.xzn.ir/css-/%D9%85%D8%B9%D8%B1%D9%81%DB%8C%20%D8%AE%D8%B5%DB%8 C%D8%B5%D9%87%20%20stroke%20%D8%AF%D8%B1css3/)