دسته : آموزش CSS

دستور border-radius در css

آموزش کامل دستور border-radius در css شامل border-top-left-radius و border-top-right-radius و دستور border-top-right-radius و دستور border-bottom-right-radius همراه با چندین مثال و توضیحات کامل.

دستور border-radius

دستور border-radius در css برای گرد کردن گوشه های باکس ها بکار می رود.

ما می توانیم تمام گوشه ها را با یک دستور گرد کنیم یا اینکه فقط یک گوشه را گرد کنیم که در قسمت پایین با انواع دستورات border-radius آشنا می شوید.

در این بخش از آموزش css از تاپ سایت 98 به سراغ دستور border-radius میرویم.

مثال دستور border-radius

در مثال زیر یک باکس با استفاده از تگ div ایجاد کرده ایم.

سپس برای آن css یا استایل نوشته ایم .

خروجی یک باکس به شکل مستطیل میباشد که پس زمینه آن سبز میباشد و گوشه های آن با دستور border-radius گرد کرده ایم.

<!DOCTYPE html>
<html>
<head>
<style>
.cc {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 190px;
height: 135px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="cc">
<h2>TopSite98</h2>
<p>border radius</p>
</div>
</body>
</html>

ما می توانیم بجای پس زمینه ، از border استفاده کنیم.

برای این کار کد css را تغییر می دهیم.

کافی است کد css را با کد بالا جابجا کنید.

خروجی کد زیر یک باکس با پس زمینه سفید و کادر یا border به عرض 2 پیکسل میباشد.

<style>
.cc {
border: 2px solid red;
border-radius: 25px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>

همچنین ما می توانیم برای گوشه های مختلف سایزهای مختلفی تعریف کنیم.

در مثال زیر ما یک باکس با گوشه های گرد خواهیم داشت.

این کد را با قسمت style مثال اول جابجا کرده و نتیجه را ببینید.

<style>
.cc {
border: 2px solid red;
border-radius: 25px 10px 30px 50px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>

ساخت باکس بیضی شکل

برای ساخت باکس بیضی شکل با دستور border-radius کافی است که مقدار را مساوی 50 درصد قرار دهیم.

در این صورت باکس به شکل دایره یا بیضی خواهد شد.

<style>
.cc {
border: 2px solid red;
border-radius:50%;
padding: 20px;
width: 190px;
height: 135px;
}
</style>

دستور border-top-left-radius

دستور border-top-left-radius در css برای گرد کردن گوشه سمت چپ و بالای باکس استفاده می شود.

کد زیر را در یک فایل html قرار دهید و نتیجه را ببینید.

<!DOCTYPE html>
<html>
<head>
<style>
.cc {
background-color: orange;
border-top-left-radius:30px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="cc">
<h2>TopSite98</h2>
<p>border radius</p>
</div>
</body>
</html>

دستور border-top-right-radius

دستور border-top-right-radius برای گرد کردن گوشه بالا و سمت راست باکس یا عنصر html بکار میرود.

در مثال زیر گوشه سمت راست بالا باکس با کلاس cc گرد می شود.

<style>
.cc {
background-color: orange;
border-top-right-radius:30px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>

دستور border-bottom-left-radius

دستور border-bottom-left-radius برای گرد کردن گوشه سمت چپ و پایین باکس یا عنصر بکار میرود.

<style>
.cc {
background-color: orange;
border-bottom-right-radius:30px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>

دستور border-bottom-right-radius

دستور border-bottom-right-radius برای گرد کردن گوشه سمت راست و پایین باکس یا عنصر بکار میرود.

<style>
.cc {
background-color: orange;
border-bottom-right-radius:30px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

منبع : تاپ سایت 98 نویسنده : هدایت عباسی تاریخ : 2019-03-09 19:42:44 تگ :
تاپ سایت 98 تاپ سایت 98 تاپ سایت 98