HTML設定邊框的三種方式
文章目錄
- HTML設定邊框的三種方式
- 1、邊框的組成:
- 2、復合樣式
- 3、單一設定
- 這樣代表上邊框 右邊框 下邊框 左邊框 分別對四條邊框進行設定
- 兩個值代表:上下邊框 左右邊框
- 三個值代表:上邊框 左右邊框 下邊框
- 也可以對每一個邊框單獨設定!
提示:以下是本篇文章正文內容,下面案例可供參考
border-width: 1px 2px 2px;
border-style: solid dashed dotted;
border-color:red green blue;
/*分別為 上→左右→下 邊框設定*/
1、邊框的組成:
代碼如下(示例):
border: 1px solid #fff
引數:
第一個是邊框的粗細 1px
第二個是邊框的樣式 solid 實線 dashed 虛線 dotted 點畫線 (不兼容 在不同的瀏覽器上顯示的不一樣)
第三個是邊框的顏色 red 直接用英文單詞表示顏色 #f00 顏色的十六進制表示法 rgb(255,0,0) rgb表示法
2、復合樣式
代碼如下(示例):
/*border: 1px solid red;
/*復合樣式*/
3、單一設定
代碼如下(示例):
border-width: 1px 2px 2px 1px;
border-style: solid dashed dotted solid;
border-color:red green blue pink;
/*分別為上→右→下→左 邊框設定*/
這樣代表上邊框 右邊框 下邊框 左邊框 分別對四條邊框進行設定
border-width: 1px 2px;
border-style: solid dashed;
border-color:red green;
/*分別為 上下 左右 邊框設定*/
兩個值代表:上下邊框 左右邊框
三個值代表:上邊框 左右邊框 下邊框
也可以對每一個邊框單獨設定!
border-top;
border-right;
border-bottom;
border-left;
注:這里只建議初學者使用邊框單獨設定,因為不僅作業量大 而且也很怪異 不美觀,熟練之后使用復合樣式最佳!
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/273252.html
標籤:其他
上一篇:個人簡歷
