CSS常見屬性(邊框屬性)

邊框屬性:

border-style? border-width? border-color


border-style:

none(沒有邊框)? solid(實線邊框)? dashed(虛線邊框)? dotted(點狀邊框)? double(雙線邊框)? groove(凸槽邊框)? ridge(壟狀邊框)? inset(inset邊框)? outset (outset邊框)? inherit(繼承)

1.統一定義 —— ?border-style:具體值;

例如:

.div0{

? ? ?border-style:none;

}

2.分別定義 —— border-方向-style:具體值;

例如:

.div1{

? ? border-top-style:solid;

? ? border-left-style:dashed;

? ? border-bottom-style:dotted;

? ? border-right-style:double;

}


border-width:

thin(細邊框) medium(中等邊框) thick(粗邊框) px(自定義值)? inherit(繼承)

1.統一定義 —— border-width:具體值;

例如:

.div2{

border-width:10px;

}

2.分別定義 —— border-方向-width:具體屬性;

例如:

.div3{

border-style:solid;

border-top-width:thin;

border-left-width:medium;

border-bottom-width:thick;

border-right-width:10px;

}


border-color:

顏色值的名稱 ? ?RGB ? ?RGBA ? ?16位進制 ?inherit(繼承)

1.統一定義 —— border-color:具體值;

例如:

.div4{

border-style:solid;

bord-width:10px;

border-color:red;

}

2.分別定義 —— border-方向-color:具體值;

例如:

.div5{

border-style:solid;

border-width5;

border-top-color:orange;

border-left-color:blue;

border-bottom-color:yellow;

border-right-color:red;

}

3.簡單定義 —— ?border-color:具體值

一個值(上、下、左、右)/兩個值(上下、左右)/三個值(上、(左右)、下)/四個值(上、右、下、左)

例如:

.div6{

border-style:solid;

border-width10px;

border-color:red green;

}

.div7{

border-style:solid;

border-width10px;

border-color:red green orange;

}

.div8{

border-style:solid;

border-width10px;

border-color:red green orange blue;

}


總結:

邊框屬性有一種簡寫方式 —— border:style ?width color;

例如:

.div9{

border:double 10px blue;

}

待續。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,094評論 0 1
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,803評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,335評論 0 11
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,047評論 1 4
  • 來到橙子學院為我帶來新鮮感,在這里遇見一群充滿活力、搞怪開心的小伙伴,給我這個靜靜的人帶來不一樣的世界。 來到橙子...
    絢麗風景閱讀 346評論 0 0