在
之前的文章《html網頁中如何實現居中效果(程式碼分享)》中,跟大家介紹如何讓網頁整體居中。以下這篇文章跟大家介紹怎麼使用css為HTML元素字體加入邊框效果,我們一起看看怎麼做。
html元素加入邊框用border屬性來實作。
border 簡寫屬性在一個聲明中設定所有的邊框屬性。
border屬性的三要素
border-width
預設是1px
border-style
邊框樣式
border-color
預設是黑色
##border-style 設定邊框的樣式可選
<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 、設定div標籤的class屬性為mydiv
<div class="mydiv">随意写文字</div>1、
標籤,頁面的css樣式。
<style type="text/css">...</style>2、mydiv的div進行樣式設置,使用width和height屬性設定div的寬度為85px和高度為20px。
.mydiv{ width: 85px; height: 20px; }3、四個邊框都設定為1px實作灰色邊框的方法。 1、
border-left屬性設定div的左邊框;
border-right屬性設定div的右邊框;
border-top屬性設定div的上邊框;
border-bottom屬性設定div的下邊框。
border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc程式碼效果 推薦學習:
以上是手把手教你使用css為HTML字體加入邊框效果(程式碼分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!