خطوط حاشیه در CSS 3 - خاصیت border-radius
خاصیت border-radius در خطوط حاشیه :
از خاصیت border-radius در CSS 3 می توان برای ایجاد گوشه های منحنی برای خطوط حاشیه
عناصر استفاده کرد . قبل از این ، طراحان وب برای ایجاد منحنی در خطوط حاشیه عناصر
مجبور بودند از ترفندهایی مثل قرار دادن عکس در چهار گوشه یک عنصر استفاده کنند ، اما
به وسیله این خاصیت به راحتی و فقط با نوشتن یک کد ساده می توانید گوشه های خطوط حاشیه
را از حالت ساده به منحنی تبدیل کنید .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
border-radius : length;
مثال : border-radius : 25px ;
|
|
توضیح
|
به وسیله پارامتر length می توانید میزان و درجه انحنای گوشه های خطوط حاشیه را تعیین
نمایید . هر چه مقدار این پارامتر بیشتر باشد ، انحنای گوشه ها نیز بیشتر خواهد بود
. این پارامتر را می توانید به دو روش مقدار دهی کنید :
- مقدار دهی بر حسب اندازه : در این حالت باید مقدار پارامتر
را بر حسب واحدی مثال px یا em تعیین کنید . مثلا px10.
- مقدار دهی بر حسب درصد % : در این حالت باید مقدار انحنای گوشه
ها را بر حسب درصد تعیین کنید . مثلا % 10 .
|
چند نکته مهم :
1. برای استفاده از این خاصیت باید حتما برای عنصر توسط خاصیت border خطوط حاشیه لازم
را تعیین کرده تا سپس گوشه های آن را منحنی کنید . این مسئله را در مثال های عملی نشان
داده ایم .
2. می توانید میزان انحنای هر گوشه خطوط حاشیه را به صورت مجزا نیز تعیین کنید . در
حالت بالا میزان انحنای در نظر گرفته شده ، برای هر چهار گوشه عنصر به یک اندازه تعیین
می شود . اما می توانید به یکی از روش های زیر انحنا در هر گوشه را مجزا تعریف کنید
:
A : تعیین میزان انحنای هر گوشه در خاصیت چند مقداری border-radius
. به ترتیب تعیین شده برای هر جهت دقت نمایید :
|
Syntax
|
border-radius : border-top-left-radius border-top-right-radius border-bottom-right-radius
border-bottom-left-radius ;
مثال : border-radius : 25px 20px 25px 20px ;
|
B : یا تعیین میزان انحنای هر گوشه توسط یک خاصیت جداگانه :
|
Syntax
|
border-top-left-radius : length ;
border-top-right-radius : length ;
border-bottom-right-radius : length ;
border-bottom-left-radius : length ;
مثال :
border-top-left-radius : 25px ;
border-top-right-radius : 20px ;
border-bottom-right-radius : 25px ;
border-bottom-left-radius : 20px ;
|
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه 9 به بعد ،
مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی
می کنند .
مثال های عملی :
در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم
.
مثال 1 : در مثال اول یک تگ < div > داریم که ابتدا توسط
خاصیت border برای آن خطوط حاشیه تعریف کرده ایم . سپس با استفاده از خاصیت border-radius
میزان انحنای تمام گوشه های آن را به یک اندازه یکسان 25px تعیین کرده ایم :
< html >
< head >
< style >
div
{
border : solid 2px
blue ;
border-radius : 25px
;
}
< /style >
</head>
<body>
< div > border radius example
< /div >
</body>
</html>
|
|
border raduis example
|
مثال 1 : در مثال دوم ، مثال قبل را بازنویسی کرده ایم . با
این تفاوت که میزان انحنای هر یک از گوشه ها را به صورت مجزا و برحسب درصد در خاصیت
چند مقداری border-radius تعیین کرده ایم . در این مثال برای گوشه های سمت راست مقدار
%10 و برای گوشه های چپ %30 را در نظر گرفته ایم :
< html >
< head >
< style >
div
{
border : solid 2px
blue ;
border-radius: 30%
10% 10% 30% ;
}
< /style >
</head>
<body>
< div > < br /> border radius
example < br /> < br /> < /div >
</body>
</html>
|
|
border raduis example
|