آموزش CSS - صفت Border

          mahdi 
            بازدید : 59
          چهارشنبه 25 مرداد 1391
           نظرات (0)
        

صفت Border

برای ایجاد کادر دور تصاویر و لبه های اطراف یک عنصر از صفت Borderاستفاده می شود . در HTML برای ساختن کادراز تگ 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;

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

مشاهده دمو

منبع

ارسال نظر برای این مطلب