css常用的簡寫技巧_css background簡寫、css border 簡寫、css font屬性簡寫等

css樣式中有很多簡寫方式，比如：設置背景，字體，邊框，盒子等。我們都可以把css代碼合並為一行，這篇文章將總結有哪些屬性支持css簡寫。

 

1、背景background屬性 

background-color:#F00;
background-image:url(header_bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;

上面的可以簡寫為：

background:#F00 url(header_bg.gif) no-repeat fixed left top;

簡寫的順序為：background-color | background-image | background-repeat | background-attachment | background-position  

 

2、字體font屬性

font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:'宋體',arial,verdana;

上面的可以簡寫為：  

font:normal small-caps bold 14px/1.5em '宋體',arial,verdana;

順序：font-style | font-variant | font-weight | font-size | line-height | font-family（注：簡寫時，font-size和line-height只能通過斜杠/組成一個值，不能分開寫。）

  

3、外邊距和內邊距margin&padding屬性

margin-top:4px;
margin-right:0;
margin-bottom:1.5em;
margin-left:-12px;

簡寫等級於

margin:4px 0 1.5em -12px;

a、當4個值順序：margin-top | margin-right | margin-bottom | margin-left（注：padding屬於的簡寫和margin完全一樣。 ）

b、當為3個值的時候：省略的“左”值等於“右”值,如下：

margin:1px 2px 3px;
/*等價於：margin:1px 2px 3px 2px*/

c、當為2個值的時候：上下2邊等於第一個值，左右2邊等於第二個值，即省略的“下”值等於“上”。

d、當為1個值的時候：上下左右值都一樣。

 

4、邊框border屬性

border-width:1px;
border-style:solid;
border-color:#CCC;

等價於：

border:1px solid #CCC;

順序：border-width | border-style | border-color  

 

5、列表樣式list-style屬性

list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);

等價於

list-style:square outside url(bullet.gif);

順序：list-style-type | list-style-position | list-style-image  

 

6、顏色color屬性

color:#000000;
color:#336699;

等價於：

color:#000;
color:#369;

說明:簡寫技巧只適用於成對出現的顏色值，其它顏色值不適用這種技巧，比如:#010101, #223345, #FFF000

51220網站目錄 https://www.51220.cn

7、圓角border-radius屬性

border-top-left-radius ：50%；
border-top-right-radius  ：50%；
border-bottom-right-radius：50%；
border-bottom-left-radius：50%；

等價於 

border-radius:50%;

說明：

四個值：分別表示左上角、右上角、右下角、右下角 。
兩個值：第一個值表示左上角、右下角；第二個值表示右上角、左下角。 
三個值：第一個值表示左上角；第二個值表示右上角、左下角；第三個值表示右下角。
一個值：4個角都一樣

 考慮兼容性的寫法：

border-radius:50%; 
-moz-border-radius:50%;
-webkit-border-radius:50%;
-o-border-radius:50%;

 

8、過渡transition 屬性

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

等介於：

transition:width 1s linear 2s;

考慮兼容性的寫法：

transition:width 1s linear 2s;   
-moz-transition:width 1s linear 2s;     
-webkit-transition:width 1s linear 2s;  
-o-transition:width 1s linear 2s;