ساخت حاشیه (border) در CSS

[P O U R I A]

فهرست مطالب:

1. ساخت حاشیه (border) در CSS
2. تغییر رنگ حاشیه (border)، با مشخصه border-color در CSS
3. تغییر ضخامت حاشیه (border)، با مشخصه border-width در CSS
4. حذف حاشیه (border)، با مشخصه border در CSS

منبع: kelidestan

 

[P O U R I A]

ساخت حاشیه (border) در CSS

با استفاده از مشخصه border-style ، می توانیم برای یک عنصر HTML ، حاشیه (border) تعریف کنیم. به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div[COLOR=#6666FF].border_class[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]border-style[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]solid[/COLOR][COLOR=#00AA00];[/COLOR]
        [COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"border_class"[/COLOR][COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR]some text.</p[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

تغییر رنگ حاشیه (border)، با مشخصه border-color در CSS

تغییر رنگ حاشیه (border)، با مشخصه border-color در CSS

برای تغییر رنگ حاشیه (border) یک عنصر HTML ، باید از مشخصه border-color در CSS استفاده نماییم. به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div[COLOR=#6666FF].border_class[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]border-style[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]solid[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]border-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#00F[/COLOR][COLOR=#00AA00];[/COLOR]
        [COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"border_class"[/COLOR][COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR]some text.</p[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

تغییر ضخامت حاشیه (border)، با مشخصه border-width در CSS

تغییر ضخامت حاشیه (border)، با مشخصه border-width در CSS

برای تغییر ضخامت حاشیه (border) یک عنصر HTML ، باید از مشخصه border-width در CSS استفاده نماییم. به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div[COLOR=#6666FF].border_class[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]border-style[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]solid[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]border-width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]5px[/COLOR][COLOR=#00AA00];[/COLOR]
        [COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"border_class"[/COLOR][COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR]some text.</p[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

حذف حاشیه (border)، با مشخصه border در CSS

حذف حاشیه (border)، با مشخصه border در CSS

با استفاده از مشخصه زیر در CSS ، می توانیم حاشیه (border) دور یک عنصر را حذف کنیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]border[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]none[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]