定義
簡(jiǎn)寫屬性是可以讓你同時(shí)設(shè)置其他幾個(gè) CSS 屬性值的 CSS 屬性。使用簡(jiǎn)寫屬性，Web 開(kāi)發(fā)人員可以編寫更簡(jiǎn)潔、更具可讀性的樣式表督函，節(jié)省時(shí)間和精力。
CSS 規(guī)范定義簡(jiǎn)寫屬性的目的在于將那些關(guān)于同一主題的常見(jiàn)屬性的定義集中在一起激挪。比如 CSS 的 background 屬性就是一個(gè)簡(jiǎn)寫屬性辰狡，它可以定義 background-color、background-image垄分、background-repeat 和 background-position 的值宛篇。類似地，最常見(jiàn)的字體相關(guān)的屬性可以使用 font 的簡(jiǎn)寫锋喜，盒子（box）各方向的外邊距（margin） 可以使用 margin 這個(gè)簡(jiǎn)寫。
1. Font 屬性
font-family嘿般，font-style段标，font-variant，font-weight炉奴，font-size逼庞，font
font-family（字體族）: “Arial”、“Times New Roman”瞻赶、“宋體”赛糟、“黑體”等;
font-style（字體樣式）: normal（正常）、italic（斜體）或oblique（傾斜）;
font-variant (字體變化): normal（正常）或small-caps（小體大寫字母）;
font-weight (字體濃淡):是normal（正常）或bold（加粗）砸逊。有些瀏覽器甚至支持采用100到900之間的數(shù)字（以百為單位）;
font-size（字體大需的稀）: 可通過(guò)多種不同單位（比如像素或百分比等）來(lái)設(shè)置, 如：12xp，12pt师逸，120%司倚，1em
如果用 font 屬性的話，就可以把幾個(gè)樣式進(jìn)行簡(jiǎn)化，減少書的情況动知；font 屬性的值應(yīng)按以下次序書寫(各個(gè)屬性之間用空格隔開(kāi))：
字體樣式 ? | 字體變化 ? ? | 字體濃淡 ? ?| 字體大小 ?| 字體族
font-style | font-variant | font-weight | font-size | font-family
例如：
.text{
font-style:italic;
font-variant:normal;
font-weight:bold;
font-size:30px;
font-family:arial, sans-serif;?
}
上面的樣式簡(jiǎn)寫為：
.text{font:italic normal bold12pxarial,verdana;}
2. Background 屬性
background-color：#999999皿伺； //元素的背景色
background-image : url("bg-img.png"); //設(shè)置背景圖像
background-repeat : repeat-x | repeat-y | repeat | no-repeat; //設(shè)置重復(fù)方式
background-attachment : fixed | scroll; //設(shè)置背景圖片的固定方式
background-position : X軸坐標(biāo),Y軸坐標(biāo)[top,bottom,center,left,right,20px,10%];
//設(shè)置背景的左上角位置,坐標(biāo)可以是以百分比或固定單位
background ?可以用這個(gè)屬性把前面幾個(gè)綜合起來(lái)進(jìn)行簡(jiǎn)寫
background 各個(gè)值的次序依次如下：
背景色| 背景圖 | 背景圖重復(fù)方式 | 背景圖固定方式 | 背景圖坐標(biāo)
background-color | background-image ?| background-repeat | background-attachment | background-position
如果省略某個(gè)屬性不寫出來(lái)，那么將自動(dòng)為它取缺省值盒粮。
比如鸵鸥，如果去掉background-attachment和background-position的話：
background:#FFCC66url("bg-img.png") no-repeat;
例如:
.bg{background-color:#FFCC66;background-image:url("bg-img.png");background-repeat:no-repeat;background-attachment:fixed;background-position:left top;}
上面可以簡(jiǎn)寫為:
.bg{background:#FFCC66url("bg-img.png")? no-repeat? fixed? left? top; }
3. Border 屬性
border:[border-width ||border-style ||border-color |inherit];
border-width:1px;border-style:solid;border-color:#000;
可以簡(jiǎn)寫成?border:1pxsolid#000;
屬性
border-top:1pxsolid#000;
border-right:2pxsolid#000;
border-bottom:3pxsolid#000;
border-left:4pxsolid#000;
可以簡(jiǎn)寫成
border:1px solid#0002px solid #0003px solid #0004px solid #000;
border-style取值
none
No border.
*hidden
Same as 'none', but in the collapsing border model, also inhibits any other border (see the section on border conflicts).
dotted
The border is a series of dots.
dashed
The border is a series of short line segments.
solid
The border is a single line segment.
double
The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
*inset
In the separated borders model, the border makes the entire box look as though it were embedded in the canvas. In the collapsing border model, drawn the same as 'ridge'.
*outset
In the separated borders model, the border makes the entire box look as though it were coming out of the canvas. In the collapsing border model, drawn the same as 'groove'.
4. border-radius 圓角屬性
border-top-left-radius? ??
border-top-right-radius? ??
border-bottom-right-radius? ??
border-bottom-left-radius
類似邊框border屬性
取值 [<length>? |<percentage>? ]{1,2}
border-top-left-radius:5px30%;
border-top-right-radius:5px30%;
border-bottom-right-radius:5px30%;
border-bottom-left-radius:5px30%;
border-radius:5px30%;
如果實(shí)現(xiàn)一個(gè)圓可以
div{width:100px;height:100px;border:2pxsolid red;border-radius:50%;background:#00ffff;}
5. Margin 和 Padding 屬性
注意，值是從 top 順時(shí)針開(kāi)始的：top丹皱、right妒穴、bottom、接著是 left
上 ?| 右 | 下 ?| 左
padding-top | padding-right | padding-bottom | padding-left
margin-top ?| margin-right ?| margin-bottom ?| margin-left
padding : 1px 2px 3px 4px;
margin : 1px 2px 3px 4px;
6. border-image 屬性
引入圖片
border-image-source
border-image-source:url(image url);
切割引入的圖片
border-image-slice
border-image-slice: [<number>? |<percentage>?]{1,4}&& fill?
邊框的寬度
border-image-width
border-image-width: [<length>? |<percentage>? |<number>? | auto ]{1,4}
圖片的排列方式
border-image-repeat
border-image-repeat: [ stretch | repeat | round ]{1,2}
border-image對(duì)表格table的影響
https://drafts.csswg.org/css-backgrounds-3/#border-image-tables
https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#border-conflict-resolution
7. transition 過(guò)渡
transition 是一個(gè)簡(jiǎn)寫屬性种呐，可設(shè)置 transition-property, transition-duration, transition-timing-function,? transition-delay宰翅。 transition用來(lái)定義元素在兩種狀態(tài)之間的過(guò)渡。不同狀態(tài)可以用:hover 爽室、:active之類的 pseudo-classes 定義，或者使用 JavaScript 動(dòng)態(tài)設(shè)置淆攻。
幾種動(dòng)畫效果
ease：（逐漸變慢）默認(rèn)值阔墩，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)瓶珊，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
ease-out：（減速）啸箫，ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）伞芹， 特定的cubic-bezier曲線忘苛。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)唱较，否則無(wú)效扎唾。
其是cubic-bezier為通過(guò)貝賽爾曲線來(lái)計(jì)算“轉(zhuǎn)換”過(guò)程中的屬性值，如下曲線所示南缓，通過(guò)改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過(guò)程的Output Percentage胸遇。初始默認(rèn)值為default.
樣式
a{
-moz-transition:background0.5sease-in,color0.3sease-out;
-webkit-transition:background0.5sease-in,color0.3sease-out;
-o-transition:background0.5sease-in,color0.3sease-out;
transition:background0.5sease-in,color0.3sease-out;
}
p{
-webkit-transition:all .5sease-in-out1s;
-o-transition:all .5sease-in-out1s;
-moz-transition:all .5sease-in-out1s;
transition:all .5sease-in-out1s;
}
8. list-style 屬性
CSS list-style 屬性是設(shè)置list-style-type, list-style-image 和 list-style-position? 的簡(jiǎn)寫屬性。
list-style-type取值
none
disc?實(shí)心圓點(diǎn) (默認(rèn)值)
circle?空心圓點(diǎn)
square 實(shí)心方塊
decimal 十進(jìn)制阿拉伯?dāng)?shù)字 從1開(kāi)始
cjk-decimal 中日韓十進(jìn)制數(shù) 例如: 一, 二, 三, ..., 九八, 九九, 一〇〇
decimal-leading-zero Decimal numbers Padded by initial zeros E.g. 01, 02, 03, … 98, 99
lower-roman Lowercase roman numerals E.g. i, ii, iii, iv, v…
...
list-style-position
取值
outside 標(biāo)記盒在主塊盒的外面汉形。
inside 標(biāo)記盒是主要塊盒中的第一個(gè)行內(nèi)盒纸镊，處于元素的內(nèi)容流之后。
參考文獻(xiàn)
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties
http://blog.csdn.net/shenzhennba/article/details/7356095
https://drafts.csswg.org/css-backgrounds-3/#the-border-shorthands
http://www.w3cplus.com/content/css3-border-image
http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
https://drafts.csswg.org/css-transitions/#transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
http://www.w3cplus.com/content/css3-transition
https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style
https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type
