برای ایجاد کادر دور تصاویر و لبه های اطراف یک عنصر از صفت Borderاستفاده می شود . در HTML برای ساختن کادراز تگ table استفاده می شود ولی با Css می توانیم کادرهای زیبا برای هر عنصر ایجاد کنیم .
طبق آموزشهای قبل ابتدا خاصیت های صفت Border را معرفی میکنم و بعد هر کدام را با مثال برای شما توضیح میدهم .
border-style : نوع شکل خطها را تعیین میکند
border-width : عرض و ضخامت خطها را تعیین میکند
border-top : برای قسمت بالای کادر کشیده شده یا تصویر یک خط در نظر می گیرد
border-right-color
استفاده کنید یا اگر بخواهید عرض کادر بالای یک صفحه را ضخیم تر کنید از خاصیت
border-top-width
استفاده کنید.
صفت Border-color | border-style | border-width
از این خاصیت برای تغییر رنگ ، نوع خطور و ضخامت کادرهای کشیده شده استفاده می شود . شما می توانید رنگ مورد نظر خود را به صورت عددی ، هگزاد دیسمال یا نام رنگ وارد کنید . من برای اینکه دقیق متوجه بشوید نوع خط و ضخامت لبه های تصویر را نیز کمی درشت تر میکنم .
به مثال زیر توجه کنید :
img.border { border-color : #C00; border-width : 4px; border-style : dashed; }
همانطور که در کدهای بالا می بینید من از سه خاصیت استفاده کردم اولی برای تغییر رنگ . دوم برای ضخامت و سومین خاصیت نوع کادر کشیده شده می باشد .
هر کدام از خاصیت های نام برده شده دارای مقدارهای متفاوتی می باشند برای تغییر رنگ که در درس های قبلی با آن آشنا شده اید . برای ضخامت هم از پیکل یا درصد می توانید استفاده کنید ولی برای نوع خطوط ویژگیهای hidden | dotted | dashed | solid | double | groove | ridge | inset | outset می توان استفاده کرد.
معادل فارسی انواع خطها در css
hidden : هیچ خطی اضافه نمی شود.
Dotted : حالت نقطه چین می باشد.
Dashed : حالت خط چین ایجاد می کند.
solid : حالت توپر ایجاد میکند.
Double: دوخط ایجاد می کند که پهنای خط وسط نصف می شود.
Groove : شیار سه بعدی ایجاد می کند.
Ridge : حالت برجسته سه بعدی ایجاد می کند .
Inset : حالت تو رفته سه بعدی ایجاد می کند.
Outset : حالت برآمده سه بعدی ایجاد می کند.
به مثال زیر توجه کنید :
.border { border-color : #C00; border-width : 220%; border-style: hidden; } .border1 { border-color :green; border-width:12px; border-style:dotted; } .border2 { border-color :191919; border-width : medium ; border-style :dashed; } .border3 { border-color :#C00; border-width :20px; border-style : solid; } .border4 { border-color :#C00; border-width :220%; border-style : double; } .border5 { border-color :#C00; border-width : thin; border-style : groove; } .border6 { border-color :blue; border-width:10px; border-style:ridge; } .border7 { border-color :#C00; border-width:2px; border-style:inset; } .border8 { border-color :#C00; border-width:220%; border-style:outset; }
به مثال زیر توجه کنید .
.border { border-bottom-color:#C00; border-bottom-style:dotted; border-bottom-width:20px; } .border1 { border-left-color:#00F; border-left-style:groove; border-left-width:20px; } .border2 { border-right-color:#FF3; border-right-style:dotted; border-right-width:10px; } .border3 { border-top-color:#F00; border-top-style:double; border-top-width:20px;<p></p> <p>} .border4 { border-top-color:#F00; border-top-style:double; border-top-width:20px; border-righ-color:black; border-right-style:double; border-right-width:20px; } .border5 { border-top-color:#F00; border-top-style:double; border-top-width:20px; border-bottom-color:#F00; border-bottom-style:double; border-bottom-width:20px; } .border6 { border-righ-color:black; border-right-style:double; border-right-width:20px; border-left-color:black; border-left-style:double; border-left-width:20px; } </p>