صفت border و  border-radius در CSS

صفت border و border-radius در CSS

توسط / CSS / پنج شنبه, 26 مرداد 1396 ساعت 10:07

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;
}

 

 

 

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.