اگر آموزش های ما را دنبال کرده باشید در مطالب قبلی در مورد زبان برنامه نویسی CSS3 توضیحاتی را به شما ارائه دادیم.در این مطلب قصد داریم به یکی دیگر از خاصیت های این زبان بپردازیم که می تواند استفاده از آن امکانات جالبی را برای شما فراهم کند.
خاصیت border-radius در خطوط حاشیه :
از خاصیت border-radius در CSS 3 می توان برای ایجاد گوشه های منحنی برای خطوط حاشیه عناصر استفاده کرد . قبل از این ، طراحان وب برای ایجاد منحنی در خطوط حاشیه عناصر مجبور بودند از ترفندهایی مثل قرار دادن عکس در چهار گوشه یک عنصر استفاده کنند ، اما به وسیله این خاصیت به راحتی و فقط با نوشتن یک کد ساده می توانید گوشه های خطوط حاشیه را از حالت ساده به منحنی تبدیل کنید .
شکل کلی استفاده از این خاصیت به صورت زیر است :
;border-radius : length
; border-radius : 25px:مثال
توضیح هر یک از موارد syntax :
length:
به وسیله پارامتر length می توانید میزان و درجه انحنای گوشه های خطوط حاشیه را تعیین نمایید . هر چه مقدار این پارامتر بیشتر باشد ، انحنای گوشه ها نیز بیشتر خواهد بود . این پارامتر را می توانید به دو روش مقدار دهی کنید :
مقدار دهی بر حسب اندازه : در این حالت باید مقدار پارامتر را بر حسب واحدی مثال px یا em تعیین کنید . مثلا px10.
مقدار دهی بر حسب درصد % : در این حالت باید مقدار انحنای گوشه ها را بر حسب درصد تعیین کنید . مثلا % ۱۰ .
چند نکته مهم :
۱٫ برای استفاده از این خاصیت باید حتما برای عنصر توسط خاصیت border خطوط حاشیه لازم را تعیین کرده تا سپس گوشه های آن را منحنی کنید . این مسئله را در مثال های عملی نشان داده ایم .
۲٫ می توانید میزان انحنای هر گوشه خطوط حاشیه را به صورت مجزا نیز تعیین کنید . در حالت بالا میزان انحنای در نظر گرفته شده ، برای هر چهار گوشه عنصر به یک اندازه تعیین می شود .
