malekzad
دوشنبه 03 خرداد 1389, 13:09 عصر
اولین ویژگی border-radius
حتما تا حالا سایت هایی با حاشیه های گرد شده دیده اید
برای اینکه ما هم حاشیه های گرد شده داشته باشیم :
اول مقدار border را تنظیم می کنیم.
دوم از قابلیت جدید Css3 به نام border-radius استفاده می کنیم.
<html>
<head>
<title>Border Radius</title>
<style>
#div1
{
background-image: url(donnieyen.jpg);
width: 310px;
height: 280px;
border: 5px solid #f54;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 110px;
padding-left: 20px;
font-family: Tahoma;
}
</style>
</head>
<body>
<div id="div1">
<span>Dannie yen </span>
</div>
</body>
</html>
خروجی کد بالا به شکل زیر خواهد بود :
http://barnamenevis.org/forum/attachment.php?attachmentid=49603&d=1274690981
توضیح کد :
شعاع یا Radius نصف قطر یک دایره می باشد.
پس با Border-Radius میزان خمیدگی گوشه را مشخص می کنیم و هر چقدر مقدار آن افزایش یابد مقدار خمیدگی بیشتر می شود.
برای اینکه بتونیم از border-radius در مروگر FireFox استفاده کنیم از وصله ی -moz- استفاده می کنیم
برای اینکه بتونیم از border-radius در مروگر Safari استفاده کنیم از وصله ی -webkit- استفاده می کنیم