HTML中怎么給字體添加邊框效果

這篇文章給大家介紹HTML中怎么給字體添加邊框效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

html元素添加邊框用border屬性來實(shí)現(xiàn)。

border 簡(jiǎn)寫屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩浴?/p>

border屬性的三要素

• border-width 默認(rèn)是 1px

• border-style 邊框樣式

• border-color 默認(rèn)是黑色

border-style設(shè)置邊框的樣式可選

代碼示例

<style>
p.none {border-style:none;}
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.hidden {border-style:hidden;}
</style>

代碼效果

方法步驟

1、設(shè)置div標(biāo)簽的class屬性為mydiv

<div class="mydiv">隨意寫文字</div>

1、<style type="text/css"></style>標(biāo)簽，頁面的css樣式。

<style type="text/css">...</style>

2、mydiv的div進(jìn)行樣式設(shè)置，使用width和height屬性設(shè)置div的寬度為85px和高度為20px。

.mydiv{
	width: 85px;
	height: 20px;
	}

3、四個(gè)邊框都設(shè)置成為1px實(shí)現(xiàn)灰色邊框的方法。

1、border-left屬性設(shè)置div的左邊框；

2、border-right屬性設(shè)置div的右邊框；

3、border-top屬性設(shè)置div的上邊框；

4、border-bottom屬性設(shè)置div的下邊框。

border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc

代碼效果

關(guān)于HTML中怎么給字體添加邊框效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。