با استفاده از ویژگی border-radius در CSS می‌توانید به هر عنصری گوشه‌های گرد اضافه کنید.
ویژگی border-radius در CSS
ویژگی border-radius، شعاع گوشه‌های یک عنصر را تعریف می‌کند.
نکته: این ویژگی به شما امکان می‌دهد تا به عناصر گوشه‌های گرد اضافه کنید!
چند مثال:
- گوشه‌های گرد برای عنصری با یک رنگ پس‌زمینه مشخص:
<div id="rcorners1">گوشه‌های گرد!</div>- گوشه‌های گرد برای عنصری با یک حاشیه:
<div id="rcorners2">گوشه‌های گرد!</div>- گوشه‌های گرد برای عنصری با یک تصویر پس‌زمینه:
<div id="rcorners3">گوشه‌های گرد!</div>کد نمونه:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url('paper.gif');
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}ویژگی border-radius - تعیین هر گوشه به طور مجزا
ویژگی border-radius می‌تواند از یک تا چهار مقدار داشته باشد. در اینجا قوانین توضیح داده شده است:
- چهار مقدار –
border-radius: 15px 50px 30px 5px;(اولین مقدار برای گوشه بالا-چپ، دومین مقدار برای گوشه بالا-راست، سومین مقدار برای گوشه پایین-راست و چهارمین مقدار برای گوشه پایین-چپ اعمال می‌شود.) - سه مقدار –
border-radius: 15px 50px 30px;(اولین مقدار برای گوشه بالا-چپ، دومین مقدار برای گوشه‌های بالا-راست و پایین-چپ، و سومین مقدار برای گوشه پایین-راست اعمال می‌شود.) - دو مقدار –
border-radius: 15px 50px;(اولین مقدار برای گوشه‌های بالا-چپ و پایین-راست و دومین مقدار برای گوشه‌های بالا-راست و پایین-چپ اعمال می‌شود.) - یک مقدار –
border-radius: 15px;(مقدار به همه چهار گوشه به‌صورت یکسان اعمال می‌شود.)
کد نمونه:
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}ایجاد گوشه‌های بیضوی:
می‌توانید با استفاده از ترکیب مقادیر، گوشه‌های بیضوی نیز ایجاد کنید:
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}با استفاده از این ویژگی‌ها می‌توانید به راحتی گوشه‌های عناصر خود را مطابق نیاز سفارشی کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام