دستور border-radius در css
آموزش ویدئویی دستور border-radius
دانلود رایگان فیلم و آموزش ویدئویی دستور 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 گرد کرده ایم.
<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 پیکسل میباشد.
.cc {
border: 2px solid red;
border-radius: 25px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>
همچنین ما می توانیم برای گوشه های مختلف سایزهای مختلفی تعریف کنیم.
در مثال زیر ما یک باکس با گوشه های گرد خواهیم داشت.
این کد را با قسمت style مثال اول جابجا کرده و نتیجه را ببینید.
.cc {
border: 2px solid red;
border-radius: 25px 10px 30px 50px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>
ساخت باکس بیضی شکل
برای ساخت باکس بیضی شکل با دستور border-radius کافی است که مقدار را مساوی 50 درصد قرار دهیم.
در این صورت باکس به شکل دایره یا بیضی خواهد شد.
.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 قرار دهید و نتیجه را ببینید.
<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 گرد می شود.
.cc {
background-color: orange;
border-top-right-radius:30px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>
دستور border-bottom-left-radius
دستور border-bottom-left-radius برای گرد کردن گوشه سمت چپ و پایین باکس یا عنصر بکار میرود.
.cc {
background-color: orange;
border-bottom-right-radius:30px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>
دستور border-bottom-right-radius
دستور border-bottom-right-radius برای گرد کردن گوشه سمت راست و پایین باکس یا عنصر بکار میرود.
.cc {
background-color: orange;
border-bottom-right-radius:30px;
padding: 20px;
width: 190px;
height: 135px;
}
</style>
امیدواریم از این آموزش لذت برده باشید.
موفق باشید.
منبع: تاپ سایت 98
تگ: کادر Page Border کادربندی
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید