css 盒模型的邊框

2021-10-09 15:03:57 字數 859 閱讀 4059

邊框

邊框的寬度 border-width

邊框的顏色 border-color

邊框的樣式 border-style

border-width:

10px;

預設值,一般都是 3個畫素

border-width可以用來指定四個方向的邊框的寬度

值的情況

四個值:上 右 下 左

三個值:上 左右 下

兩個值:上下 左右

乙個值:上下左右

除了border-width還有一組 border-***-width

***可以是 top right bottom left

用來單獨指定某乙個邊的寬度

border-color用來指定邊框的顏色,同樣可以分別指定四個邊的邊框

規則和border-width一樣

border-color也可以省略不寫,如果省略了則自動使用color的顏色值

border-style 指定邊框的樣式

solid 表示實線

dotted 點狀虛線

dashed 虛線

double 雙線

border-style的預設值是none 表示沒有邊框

border簡寫屬性,通過該屬性可以同時設定邊框所有的相關樣式,並且沒有順序要求

除了border以外還有四個 border-***

border-top

border-right

border-bottom

border-left

css 盒模型的內邊框

內邊距 padding 內容區和邊框之間的距離是內邊距 一共有四個方向的內邊距 padding top padding right padding bottom padding left 內邊距的設定會影響到盒子的大小 背景顏色會延伸到內邊距上 一共盒子的可見框的大小,由內容區 內邊距 和 邊框共同...

盒模型和邊框

組成 內邊距 內邊距是邊框和內容區域的距離 padding 100px 外邊距外邊距是盒子邊框和其他元素之間的距離 margin 100px 邊框樣式 border style none 沒有邊框 solid 單實線 dashed 點線 double 雙實線 單邊邊框樣式 border top st...

css盒模型。邊框和內外邊距

css盒模型 外邊距 邊框 內填充 內容 盒模型分為兩種 標準盒模型 怪異盒模型 ie盒模型 邊框 border border 10px solid blue 表示設定10畫素藍色實線條的邊框 是以下三個樣式的復合語法 border width 10px 設定邊框的寬度 border color b...