گوشه های گرد (Rounded Corners)
با ویژگی «border-radius» می توانیم برای المان ها «گوشه های گرد» بسازیم. «شعاع (Radius)» یعنی میزان خمیدگی گوشه. این کار ظاهر کارت ها و دکمه ها را نرم تر می کند و حس مدرن تری می دهد.
آشنایی سریع با border-radius
ویژگی «border-radius» شعاع هر گوشه را تعیین می کند. این ویژگی برای المان هایی که پس زمینه، تصویر پس زمینه، یا کادر دارند خوب کار می کند.
#div1 {
border-radius: 25px;
background-color: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 25px;
background-image: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
نکته: «border-radius» شورت هند چهار ویژگی گوشه هاست: top-left، top-right، bottom-right، bottom-left.
تعیین جداگانه گوشه ها
می توانی یک، دو، سه یا چهار مقدار بدهی. ترتیب چهار مقدار از بالا-چپ ساعت گرد است.
#div1 {
border-radius: 15px 50px 30px 5px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px 50px 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 15px 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 15px;
background: #04AA6D;
width: 200px;
height: 150px;
}
شکل بیضوی و دایره ای
برای گوشه بیضوی، دو مقدار با اسلش بده: افقی/عمودی. برای بیضی یا دایره، مقدار 50% بده.
#oval1 {
border-radius: 70px / 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#oval2 {
border-radius: 15px / 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#circle-like {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 150px;
}
#circle {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 200px;
}
گام های عملی سریع
- یک باکس بساز و رنگ پس زمینه بده.
- به آن border-radius: 16px بده.
- گوشه ها را با چهار مقدار تست کن.
- با 50% یک دایره تمیز بساز.
نکته: برای چیدمانِ باکس ها به چیدمان وب سایت سر بزن. همچنین صفحه طراحی واکنش گرا برای هماهنگی موبایل مفید است. اگر خواستی، همین گوشه های گرد را به عنوان الگوی طراحی نگه دار.
جمع بندی سریع
- border-radius گوشه ها را گرد می کند.
- چهار مقدار، ترتیب ساعت گرد دارد.
- اسلش، بیضوی می سازد.
- پنجاه درصد، دایره ایجاد می کند.