CSS3 經常使用新特性

1、CSS3選擇器

一、屬性選擇器 title屬性：

#test[title=box1]{
background-color: blue;
}

<div id="test" title="box1">Hello world\</div>

若是寫成 [title~=box1]{ background-color: yellow;}，那麼符合title屬性值裏含有box1字段的選擇器，其餘字段用空格隔開也會生效，例如： title="box1 abc"
同理類推：
一、[attribute|=value]：value值開頭(必須只有value爲開頭的整個單詞或者後面接連字符)
二、[attribute^=value]：value值開頭的全部元素
三、[attribute*=value]：包含value的全部元素
四、[attribute$=value]：以value爲結尾的全部元素

二、僞類選擇器

一、 p:nth-child(n) p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。 適用於給父類名使用
二、 :nth-last-child(n) p:nth-last-child(2) 同上，從最後一個子元素開始計數。
三、 :nth-of-type(n) p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每一個 <p> 元素。
四、 :nth-last-of-type(n) p:nth-last-of-type(2) 同上，可是從最後一個子元素開始計數。

2、盒模型

一、盒模型種類

• content-box： 內容+padding+邊框
• padding-box： 內容+padding
• border-box： 只有內容

二、彈性盒子（Flex Box）

  Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。 任何一個容器均可以指定爲 Flex 佈局，即便是行內元素。
.box{
 display: inline-flex;
}
PS：flex佈局會使子元素的float、clear、vertical-align失效。

當容器寫上box-orient: horizontal 水平方向（不寫的時候此爲默認值），其子元素排序爲水平方向排序。此外flex佈局還有6個經常使用屬性。

• flex-direction 容器內容排列方向
• flex-wrap 一行排滿後，項目換行方式
• flex-flow 這是上面兩個的縮寫
• justify-content 水平排列方式
• align-items 垂直排列方式
• align-content 垂直排列（僅對多行有效）

3、動畫特效

• transform transform屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。
• transition transition 屬性是一個簡寫屬性，用於設置四個過渡屬性
• animation animation 屬性是一個簡寫屬性，用於設置六個動畫屬性
• @keyframes 經過 @keyframes 規則，您可以建立動畫。

一、transform
transform: none|transform-functions

二、transition
transition: property duration timing-function delay;

三、animation
animation: name duration timing-function delay iteration-count direction;

四、keyframes
搭配animation使用:

#box1{
 anmition: mymove 2s infinite;
}
@keyframes mymove{
 0% {top:0px;}
 25% {top:200px;}
 50% {top:100px;}
 75% {top:200px;}
 100% {top:0px;}
}

4、邊框border

• border-radius 用於建立圓角
• box-shadow 用於建立陰影
• border-image 用圖片當邊框 (較少用)

一、border-radius
#div{
 text-align:center;
 border:2px solid #a1a1a1;
 padding:10px 10px;
 background:#dddddd;
 width:120px;
 border-radius:20px;
}

二、box-shadow
box-shadow:10px 10px 5px #888888;

5、字體

• @font-face 設計師能夠經過此任意使用本身喜歡的字體