دیگر زمان آن منسوخ شده که همه ما براي یک گرد کردن ساده از انواع روشها استفاده میکردیم و تقریباً همه ي آنها شامل افزودن
عکسهاي متعدد به گوشه ها میشد!
حال با استفاده از این ویژگی به راحتی میتوان گوشه هاي اجزا را گرد کرد.
خود چنین داریم html فرض کنید ما در صفحه
کد:
<div class="use-border-radius">
salam
</div>
و در استایل خود چنین
کد:
div.use-border-radius{
width : 300px;
height : 300px;
background : gray;
}
پس در مروگر چنین چیزي مشاهده خواهیم کرد.
اکنون براي گرد کردن تمامی گوشه هاي این مربع فقط کافی است ویژگی border-radius را اضافه کنیم.
کد:
div.use-border-radius{
width : 300px;
height : 300px;
background : gray;
border-radius:15px
}
و نتیجه به این صورت (در مرورگر کروم) نشان داده میشود.
همانطور که میبیند ویژگی border-radius بدون نیاز به پیشوند chrome یا webkit در گوگل کروم گوشه ها را گرد میکند و اثر میدهد.
اگر در مروگري این ویژگی نشان داده نشده پیشوند مشخصه آن مروگر را در ابتداي ویژگی اضافه کنید.
پیشنهاد میشود استایل را بصورت زیر بنویسید تا خیالتان از نمایش ندادن در مروگري خاص ، راحت کند.
کد:
div.use-border-radius{
width : 300px;
height : 300px;
background : gray;
border-radius:15px;
-moz-border-radius:15px; /* mozilla */
-o-border-radius:15px; /* opera */
-webkit-border-radius:15px; /* chrome and safari */
}
نکته جالب دیگه اینکه اگر مقدار border-radius را زیاد انتخاب کنید div مورد نظر (اگر مربع باشد) تبدیل به دایره میشود !
اکنون شاید شما نیاز داشته باشید که فقط گوشه اي خاص را گرد کنید border-radius قابل تجزیه شدن به ویژگی هاي کوچکتري است که میتوان نیاز شما را برآورده کند.
کد:
border-top-left-radius:15px; /* /*بالا چپ
border-top-right-radius:10px ; /* /*بالا راست
border-bottom-left-radius:8px ; /* /*پائین چپ
border-bottom-right-radius:20 px; /* /*پائین راست
نکته قابل توجه اینکه شما میتوانید هر چهار ویژگی جزئی را ، یا بصورت تک تک و یا باهم بکار ببرید.
نیاز به یادآوري نیست در مورد این ویژگی هاهم اگر در مرو رگري نشان داده نشد از پیشوند اختصاصی آن مرورگر استفاده کنید !
منبع: www.skin98.ir
ایا میدانید :
