خط حاشيه ( border ) در CSS

صفت border در CSS امكان تعيين استايل ،‌ ضخامت و رنگ خط حاشيه يك عنصر را فراهم مي كند.

 

استايل دهي به خط حاشيه ( border )

صفت border-style نوع خط مورد استفاده در حاشيه عنصر را مشخص مي كند.

مقادير مجاز براي اين صفت عبارتند از :
dotted - نقطه اي
dashed - خط بريده
solid - خط ممتد تكي
double - خط ممتد دوبل
groove - خط سه بعدي شياردار - نتيجه بستگي به مقدار رنگ دارد
ridge - خط سه بعدي لبه دار - نتيجه بستگي به مقدار رنگ دارد
inset - خط سه بعدي فروورفته -  نتيجه بستگي به مقدار رنگ دارد
outset - خط سه بعدي برآمده -  نتيجه بستگي به مقدار رنگ دارد
none - بدون خط حاشيه
hidden - خط حاشيه مخفي
mix - مخلوطي از انواع خطوط حاشيه براي چهار طرف


مثال :

خط حاشیه
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
مشاهده مثال



نكته :‌ صفت هاي ديگر خط حاشيه در CSS كه در ادامه نام برده خواهند شد ،‌ بدون تعيين صفت border-style تاثير نخواهند داشت.

 

ضخامت خط حاشيه border width

صفت border-width ضخامت چهار خط حاشيه عناصر را مشخص مي كند. ضخامت خطوط مي تواند با يك اندازه مشخص (در واحد هاي px ،‌ pt ،‌ cm ، em و ...) يا با 3 مقدار از پيش تععين شده نازك ،‌متوسط ،‌ ضخيم ،‌تعيين شود.
border-width مي تواند 1 تا 4 مقدار داشته باشد (خط بالا ،‌ راست ،‌پايين ،‌ چپ)

5px border-width

مثال :

ضخامت خط حاشیه
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
مشاهده مثال


 

رنگ خط حاشيه

border-color براي تعيين رنگ چهار خط حاشيه مورد استفاده است. رنگ ها مي توانند به 4 روش زير تعيين شوند :
نام رنگ
مقدار HEX
مقدار RGB
پشت نما

اين صفت نيز مي تواند 4 مقدار بالا - راست - پايين و چپ داشته باشد. اگر رنگ خط حاشيه تعيين نشود ،‌از رنگ عنصر مورد نظر تبعيت خواهد كرد.

Red border

مثال :

رنگ خط حاشیه
p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
مشاهده مثال

 

جهت هاي تكي در حاشيه ها

در مثال بالا مشاهده كردي كه مي توان براي جهت هاي 4 گانه هر خط حاشيه رنگ هاي جداگانه تعيين كرد. در CSS همچنين مي توان براي هر طرف نوع خط را نيز متفاوت از جهت ديگر ،‌تعريف كرد.
Different Border Styles

مثال :

جهت های منفرد خط حاشیه
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
مشاهده مثال
 


مثال زير هم دقيقا مانند مثال بالا نمايش داده خواهد شد :

خلاصه نویسی کد خط حاشیه
p {
    border-style: dotted solid;
}
مشاهده مثال
 


حال به تشريح مثال بالا مي پردازيم :

اگر border-style چهار مقدار داشته باشد خطوط 4 گانه به ترتيب زير خواهد بود : ;border-style: dotted solid double dashed

- خط بالا نقطه اي
- خط راست تكي
- خط پايين جفت
- خط چپ خط بريده

اگر border-style  سه مقدار داشته باشد ، خطوط 4 گانه به ترتيب زير خواهد بود : ;border-style: dotted solid double

- خط بالا نقطه اي
- خط راست و چپ تكي
- خط پايين جفت

اگر border-style  دو مقدار داشته باشد ، خطوط 4 گانه به ترتيب زير خواهد بود : ;border-style: dotted solid

- خط بالا و پايين نقطه اي
- خط راست و چپ تكي

اگر border-style  يك مقدار داشته باشد ، خطوط 4 گانه به ترتيب زير خواهد بود : ;border-style: dotted

- همه خطوط نقطه اي خواهند بود

در اين مثال ها حتي براي border-width و border-color نيز مي توان اين روش را بكار برد.

 

مختصر نويسي كدهاي border

با توجه به مثال بالا متوجه شده ايد كه هنگام كار با خطوط حاشيه صفات زيادي براي تعيين وجود دارند. براي كوتاه كردن كد ،‌امكان نوشتن آنها در يك صفت وجود دارد. صفت border مختصر شده صفات زير است :‌

border-width
border-style
border-color

مثال :

صفت border
p {
    border: 5px solid red;
}
مشاهده مثال
 


حتي مي توان همه صفت هاي جداگانه را فقط براي يك طرف تعيين كرد.


مثال حاشيه چپ:
صفت border-left
p {
    border-left: 6px solid red;
    background-color: lightgrey;
}
مشاهده مثال
 


مثال حاشيه پايين:
صفت border-bottom
p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}
مشاهده مثال
 

 

حاشيه هاي دورگرد

صفت border-radius براي دورگرد كردن خطوط حاشيه به دور يك عنصر به كار مي رود.

خطوط حاشيه عادي

خطوط حاشيه دورگرد

خطوط حاضيه دورگردتر

دورگردترين خطوط حاشيه


مثال :

خط حاشیه گوشه گرد
p {
    border: 2px solid red;
    border-radius: 5px;
}
مشاهده مثال
 

نكته ! صفت border-radius در اينترنت اكسپلورر 8 و قبل از آن پشتيباني نمي شود.

 

 

نظر شما

یادگیری CSS یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز