css樣式簡寫

css樣式簡寫

background簡寫

簡寫公式:

background: [background-color] [background-image] background-repeat [background-position] / background-size [background-clip];

在css2.1的background的簡寫公式中只有color、image、repeat、attachment、position五個屬性，在css3中加入了size、origin和clip，其中的'/'表示在支持'/'寫法的瀏覽器中能夠接着繼續寫background-size屬性

example

.example {
    background: red url('../back.png') no-repeat scroll center center / 50% content-box content-box;
}

font簡寫

簡寫公式

font:[font-style] [font-weight] [font-size] / [line-height] [font-family]

"/"的做用相似於background

example

.myFont {
    font: normal bold 20px / 24px "Microsoft YaHei";
}

border簡寫

簡寫公式

border:[border-width] [border-style] [border-color]

example

.box {
    border: 1px solid #000000;
}