css

صفت border و border-radius در CSS – آموزش CSS

border در CSS

با استفاده از صفت border شما می توانید دور بخش های مد نظرتون خط بکشید. این کار باعث زیبایی و مشخص شدن بخش مورد نظر می شود.


<div class="nameclass"></div>

.nameClass{
border: 3px solid #1d8cda;
width:100px;
height:30px;
}

برای استفاده، شما اولین ویژگیی که می نویسید ضخامت خطی است که می خواهید دور بخش مورد نظر کشیده شود. ویژگی دوم solid می باشد این ویژگی نوع خط را مشخص می کند که خط ها به صورت ساده یا خط فاصله یا نقطه ای باشد.

شما به جای solid میتوانید از dotted و dashed که به صورت نقطه نقطه در می آید و double که دو خط با فاصله ی اندک و همچنین groove و ridge و inset و outset که خطوطی صاف اما با تفاوت های کوچکی، می کشند،استفاده کنید.

d a s h e d d o t t e d d o u b l e g r o o v e i n s e t o u t s e t r i d g e

ویژگی اخر، رنگ خطوط را مشخص می کند. برای نوشتن رنگ چند روش وجود دارد در این جا میتوانید بخوانید.

شاید شما بخواهید به جای این که در چهار طرف بخش مورد نظر خط بکشید در یک سمت یا دو سمت آن خطی را رسم کنید برای این کار می توانید به جای نوشتن border از این صفات استفاده کنید ، کارتان را راحتتر می کند:

border-bottom در قسمت پایین متن

border-top در قسمت بالا

border-left در سمت چپ

border-right در سمت راست

<div class="nameclass"></div>

.nameClass{
border-top: 5px solid #1d8cda;
width: 100px;
height: 30px;
}

border-top

استفاده از border-radius در CSS

.nameClass{
     border: 2px solid red;
     border-radius: 25px;
 }

با استفاده از از این صفت میتوانید border هایی که به بخش های مختلفی دادید را زیباتر کنید. این صفت باعث می شود گوشه ی border ها خم (منهنی) شوند .مقدار عددی که جلوی آن نوشته می شود میزان خم شدن آن را نشان می دهد.

در این جا اگر یک عدد نوشته شود این عدد برای چهار گوشه در نظر گرفته می شود، اما اگر دو عدد نوشته شود عدد اول برای گوشه ی سمت راست بالا و سمت چپ پایین محصوب میشود و عدد دوم سمت راست پایین و سمت چپ بالا محاسبه میگردد. ولی اگر بخواهید برای هر گوشه عدد مختلفی در نظر بگیرید باید چهار عدد بنویسید که به ترتیب راست بالا ،راست پایین ،چپ پایین و چپ بالا محاسبه می شود.

شما در این جا می توانید از درصد نیز به جای pixel استفاده کنید.

<div class="nameclass"></div>

.nameClass{
border: 3px solid #1d8cda;
border-radius:10px 0 10px 0;
width:100px;
height:30px;
}

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close