آموزش CSS | قسمت هشتم "بوردر ها در CSS"
آموزش CSS :
سلام به همراهان همیشگی کلاس برتر ، با یک مطلب دیگر از آموزش زبان CSS همراه شما هستیم ؛ در این آموزش قصد داریم تا شما رو با نحوه حاشیه گذاری در CSS و انواع استایل های آون آشنا کنیم.
CSS border properties ( ویژگی بوردر در CSS )
شما میتوانید با استفاده از پراپرتی border در CSS استایل ، عرض و رنگ حاشیه یک عنصر را تعیین کنید.
CSS Border Style ( انواع بوردر در CSS )
- dotted - حاشیه نقطه ای را مشخص می کند
- dashed - حاشیه های شکسته را مشخص می کند
- solid - حاشیه صاف را مشخص می کند
- double - حاشیه دوتایی را مشخص می کند
- groove - حاشیه شیاردار سه بعدی را تعریف می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
- ridge - یک حاشیه سه بعدی مشخص می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
- inset - یک حاشیه درج سه بعدی تعریف می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
- outset - حاشیه شروع 3D را مشخص می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
- none - هیچ حاشیه ای را مشخص نمی کند
- hidden - یک حاشیه پنهان را مشخص می کند
پراپرتی border-style می تواند از یک تا چهار مقدار داشته باشد (برای حاشیه بالا ، حاشیه راست ، حاشیه پایین و حاشیه چپ).
مثال :
نمایش استایل های مختلف بوردر :
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;}نتیجه :
dotted border
dashed border
solid border
double border
groove border
ridge border
inset border
outset border
No border
mixed border
توجه: هیچ یک از دیگر ویژگی های border در CSS هیچ تأثیری نخواهد داشت مگر اینکه خاصیت حاشیه استایل تنظیم شود !
امیدوارم این آموزش برای شما مفید بوده باشد ؛ برای آشنایی بیشتر با تمامی ویژگی های بوردر در CSS پیشنهاد میکنم به مطلب "CSS Borders" در سایت w3school سر بزنید.