صفت Border در Css

[Sina]

صفت Border
برای ایجاد کادر دور تصاویر و لبه های اطراف یک عنصر از صفت Borderاستفاده می شود . در

برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید

برای ساختن کادراز تگ table استفاده می شود ولی با Css می توانیم کادرهای زیبا برای هر عنصر ایجاد کنیم .
طبق آموزشهای قبل ابتدا خاصیت های صفت Border را معرفی میکنم و بعد هر کدام را با مثال برای شما توضیح میدهم .
border-color : تغییر رنگ خط ها
border-style : نوع شکل خطها را تعیین میکند
border-width : عرض و ضخامت خطها را تعیین میکند
border-top : برای قسمت بالای کادر کشیده شده یا تصویر یک خط در نظر می گیرد

border-bottom : برای قسمت پایین کادر کشیده شده یا تصویر یک خط در نظر می گیرد
border-right: برای قسمت راست کادر کشیده شده یا تصویر یک خط در نظر می گیرد
border-left : برای قسمت چپ کادر کشیده شده یا تصویر یک خط در نظر می گیرد

تمام خاصیت هایی که در بالا به آنها اشاره کردم می توانند دارای 3 خاصیت اول نیز باشند به این ترتیب که اگر بخواهید رنگ سمت راست یک کادر را تغییر بدهید می توانید از خاصیت

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
{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>

منبع: learning.asarayan.com