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;
}