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 设计师能够经过此任意使用本身喜欢的字体