盒子邊框（border）

盒子寬： border-left+ padding-left + width + padding-right + border-right

邊框就是那層皮。 橘子皮。。柚子皮。。橙子皮。。。

語法：

border : border-width || border-style || border-color

邊框屬性—設置邊框樣式（border-style）

邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值） ? solid：邊框為單實線(最為常用的) ? dashed：邊框為虛線 ? dotted：邊框為點線 ? double：邊框為雙實線 <style>
div{
width: 100px;
height: 100px;
border-width: 1px;
border-color: deeding;
border-style: solid; /*邊框實線*/
border-style: dashed; /*邊框虛線 */
border:1px red dashed; /*連寫 */
border-top: 1px red solid; /*上邊框，可以用來代替hr水平線*/
border-bottom: 2px blue dashed; /*下邊框*/
border-left: 1px yellow solid; /*左*/
border-right: 2px blue solid; /*右*/
} ### 盒子邊框寫法總結表| | | | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | 設置內容 | 樣式屬性 | 常用屬性值 | | 上邊框 | border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色; | | | 下邊框 | border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色; | | | 左邊框 | border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色; | | | 右邊框 | border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色; | | | 樣式綜合設置 | border-style:上邊 [右邊 下邊 左邊]; | none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線 | | 寬度綜合設置 | border-width:上邊 [右邊 下邊 左邊]; | 像素值 | | 顏色綜合設置 | border-color:上邊 [右邊 下邊 左邊]; | 顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%) | | 邊框綜合設置 | border:四邊寬度 四邊樣式 四邊顏色; | |```border-top: 1px solid red; /*上邊框*/border-bottom: 2px solid green; /*下邊框*/border-left: 1px solid blue;border-right: 5px solid pink;border: 1px solid red; ```### 表格的細線邊框

?

?

轉載于:https://www.cnblogs.com/axianz/articles/10657430.html

總結

以上是生活随笔為你收集整理的CSS之盒子边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。