CSS3新特性

SS3选择器
选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素
#id #firstname 选择所有id="firstname"的元素

•   *	选择所有元素	
  

element p 选择所有p元素
element,element div,p 选择所有div元素和p元素
element element div p 选择div元素内的所有p元素
element>element div>p 选择所有父级是div 元素的 p 元素
element+element div+p 选择所有紧接着div元素之后的p元素
[attribute] [target] 选择所有带有target属性元素
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素
[attribute|=language] [lang|=en] 选择一个lang属性的起始值=“EN"的所有元素
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择活动链接
:hover a:hover 选择鼠标在链接上面时
:focus input:focus 选择具有焦点的输入元素
:first-letter p:first-letter 选择每一个P元素的第一个字母
:first-line p:first-line 选择每一个P元素的第一行
:first-child p:first-child 指定只有当p元素是其父级的第一个子级的样式。
:before p:before 在每个p元素之前插入内容
:after p:after 在每个p元素之后插入内容
:lang(language) p:lang(it) 选择一个lang属性的起始值=“it"的所有p元素
element1~element2 p~ul 选择p元素之后的每一个ul元素
[attribute^=value] a[src^=“https”] 选择每一个src属性的值以"https"开头的元素
[attribute$=value]a[src$=”.pdf”] 选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value] a[src*=“44lan”] 选择每一个src属性的值包含子字符串"44lan"的元素
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素
:only-child p:only-child 选择每个p元素是其父级的唯一子元素
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。
:root :root 选择文档的根元素
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点）
:target #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL）
:enabled input:enabled 选择每一个已启用的输入元素
:disabled input:disabled 选择每一个禁用的输入元素
:checked input:checked 选择每个选中的输入元素
:not(selector) :not§ 选择每个并非p元素的元素
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分
:out-of-range :out-of-range 匹配值在指定区间之外的input元素
:in-range :in-range 匹配值在指定区间之内的input元素
:read-write :read-write 用于匹配可读及可写的元素
:read-only :read-only 用于匹配设置 “readonly”（只读） 属性的元素
:optional :optional 用于匹配可选的输入元素
:required :required 用于匹配设置了 “required” 属性的元素
:valid :valid 用于匹配输入值为合法的元素
:invalid :invalid 用于匹配输入值为非法的元素

CSS3 边框（Borders）
用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
属性 说明 CSS
border-image 设置所有边框图像的速记属性。
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow 附加一个或多个下拉框的阴影
div
{
border:2px solid;
border-radius:25px;
box-shadow: 10px 10px 5px #888888;
border-image:url(border.png) 30 30 round;
}

CSS3 背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
顺序 描述 CSS
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

多背景
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
CSS3 渐变
CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, …);

径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, …, last-color);

CSS3 文本效果
属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

CSS3 字体
以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}

CSS3 转换和变形

2D新转换属性
以下列出了所有的转换属性:
Property 描述 CSS
transform 适用于2D或3D转换的元素
transform-origin 允许您更改转化元素位置

2D 转换方法
函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3D转换属性
下表列出了所有的转换属性：
属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

3D 转换方法
函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

CSS3 过渡
过渡属性
下表列出了所有的过渡属性:
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */

• webkit-transition-property:width;
• webkit-transition-duration:1s;
• webkit-transition-timing-function:linear;
• webkit-transition-delay:2s;
  }

CSS3 动画
要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

实例
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
下面的表格列出了 @keyframes 规则和所有动画属性：

属性 描述 CSS
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */

• webkit-animation-name: myfirst;
• webkit-animation-duration: 5s;
• webkit-animation-timing-function: linear;
• webkit-animation-delay: 2s;
• webkit-animation-iteration-count: infinite;
• webkit-animation-direction: alternate;
• webkit-animation-play-state: running;
  }

CSS3 多列
下表列出了所有 CSS3 的多列属性：

属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写

CSS3 盒模型
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

resize：none | both | horizontal | vertical | inherit
box-sizing: content-box | border-box | inherit
outline:outline-color outline-style outline-width outine-offset
resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

CSS3伸缩布局盒模型(弹性盒)
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

下表列出了在弹性盒子中常用到的属性:

属性 描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

CSS3 多媒体查询
从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

link rel=“stylesheet” type=“text/css” href=“site.css” media=“screen” />
link rel=“stylesheet” type=“text/css” href=“print.css” media=“print” />
清单 2. 媒体查询规则
@media all and (min-width: 800px) { … }
@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。
清单 3. and 条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { … }

清单 4. or 关键词
@media (min-width:800px) or (orientation:portrait) { … }

清单 5. 使用 not
@media (not min-width:800px) { … }