邊框基本屬性及類型
作者:zhushican 丨 時間:2022年08月11日 丨 分類：六六互聯(lián)
邊框基本屬性及類型，主要包括如表3-13所示幾種情況。
表3-13 邊框基本屬性
| 屬性 | 簡 介 |
| border-color | 設置四條邊框的顏色。 |
| border-image | 設置或檢索對象的邊框使用圖像來填充 |
| border-image-source | 設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑 |
| border-image-slice | 設置或檢索對象的邊框背景圖的分割方式 |
| border-image-width | 設置或檢索對象的邊框厚度 |
| border-image-outset | 設置或檢索對象的邊框背景圖的擴展 |
| border-image-repeat | 設置或檢索對象的邊框圖像的平鋪方式 |
| border-radius | 設置或檢索對象使用圓角邊框 |
| border-top-left-radius | 設置或檢索對象左上角圓角邊框 |
| border-top-right-radius | 設置或檢索對象右上角圓角邊框 |
| border-bottom-right-radius | 設置或檢索對象右下角圓角邊框 |
| border-bottom-left-radius | 設置或檢索對象左下角圓角邊框 |
| box-shadow | 設置和檢索對象陰影 |
1.邊框顏色
border-color 屬性設置四條邊框的顏色。此屬性可設置 1 到 4 種顏色。border-color屬性是一個簡寫屬性，可設置一個元素的所有邊框中可見部分的顏色，或者為 4 個邊分別設置不同的顏色。
下列案例3-10所示，通過border-color設置邊框顏色。
例3-10 example10.html
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p.one { border-style: solid;border-color: #0000f } p.two{border-style: solid;border-color: #ff0000 #0000ff} p.three{border-style: solid;border-color: #ff0000 #00ff00 #0000ff } p.four{border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p>One-colored border!</p> <p>Two-colored border!</p> <p>Three-colored border!</p> <p>Four-colored border!</p> <p><b>注釋：</b>"border-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設置邊框。</p> </body> </html> |
運行3-10，效果如圖3-12所示。
圖3-12 border-color設置邊框的顏色
【六六互聯(lián)】外貿(mào)抗投訴空間、抗投訴vps、抗投訴服務器
邊框圖片屬性
