邊框 border 的CSS簡寫方法

2021-05-22 05:16:31 字數 729 閱讀 2069

邊框(border)

先介紹一下border的基本屬性:

border-width:數字+單位;

border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;

border-color: 顏色 ;

border可以按照width、style和color的順序簡寫:

我們還可以針對邊的每個屬性進行精簡縮寫,縮寫規則類似盒子大小的縮寫,如下:

還是照例先介紹一下background的基本語法

background-color: color || #hex || rgb(% || 0-255) || rgba;

background-image:url();

background-repeat: repeat || repeat-x || repeat-y || no-repeat;

background-position: x y || (top||bottom||center) (left||right||center);

background-attachment: scroll || fixed;

background的簡寫可以大大的提高css的效率:

熟練的運用css簡寫,精簡css**,可以極大提高你的css**的可讀性。

CSS 邊框 border 例項

所有邊框屬性在乙個宣告之中 本例演示用簡寫屬性來將所有四個邊框屬性設定於同一宣告中。設定四邊框樣式 本例演示如何設定四邊框樣式。設定每一邊的不同邊框 本例演示如何在元素的各邊設定不同的邊框。所有邊框寬度屬性在乙個宣告之中 本例演示用簡寫屬性來將所有邊框寬度屬性設定於同一宣告中。設定四個邊框的顏色 本...

css 盒子邊框 border

1 css 邊框屬性 border width border style border color 1.1 邊框樣式 border style border style 值 none 預設無邊框 dotted 定義乙個點線邊框 dashed 定義乙個虛線邊框 solid 定義實線邊框 1.2邊框顏色...

CSS 邊框 border 例項

css 邊框 border 例項 元素的邊框 border 是圍繞元素內容和內邊距的一條或多條線。css border 屬性允許你規定元素邊框的樣式 寬度和顏色。css 邊框屬性 屬性 描述 border 簡寫屬性,用於把針對四個邊的屬性設定在乙個宣告。border style 用於設定元素所有邊框...