CSS3

CSS3 模块

CSS3 被划分为模块。

其中最重要的 CSS3 模块包括：

• 选择器
• 框模型
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面
• flexbox
• 选择器

CSS3新增伪类举例：

   
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

flexbox:(伸缩布局盒)display:flex|inline-flex;
　　　　　　自动分配容器宽高比例

　　　　　　如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
　　　　　　可以快速让他们布局在一列；
　　　　　　可以方便让他们对齐容器的左、右、中间等；
　　　　　　无需修改结构就可以改变他们的显示顺序；
　　　　　　如果元素容器设置百分比和视窗大小改变，不用担心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

选择器：nth-child、属性选择器 还可加入通配符如：^,$,*：[att^=val]表示开始字符时val的att属性、[att$=val]表示结束字符是val的att属性、[att*=val]表示包含至少有一个val的att属性。

css3边框：

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件：border-radius，border-shadow，border-image；

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

css3圆角边框

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

css3边框阴影：box-shadow:h-shadow v-shadow blur spread color insert;

div{
　　box-shadow:10px 10px 5px #999;
}

css3边框图片

border-image属性是一个简写属性：设置属性：border-image-source;资源路径

　　　　　　　　　　　　　　　　　　　　　　border-image-slice;向内偏移

　　　　　　　　　　　　　　　　　　　　　　border-image-width;宽度

　　　　　　　　　　　　　　　　　　　　　　border-image-outset;边框图像区域超出边框的量

　　　　　　　　　　　　　　　　　　　　　　border-image-repeat;是否适应平铺（repeated），铺满（rounded）,拉伸（stretched）；

#round
{
-moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
border-image:url(/i/border.png) 30 30 round;
}

#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}

#repeat
{
-moz-border-image:url(/i/border.png) 30 30 repeat;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 repeat;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 repeat;    /* Opera */
border-image:url(/i/border.png) 30 30 repeat;
}

div
{
border:10px solid transparent;
width:40px;
padding:5px 10px;
-moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
-webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Opera */
border-image: url(/i/border_image_button.png) 0 14 0 14 stretch;
}

css3背景：

　　　　background-size：

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许在不同的环境中重复使用背景图片。

可以以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}

 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 多重背景图片

CSS3 允许您为元素使用多个背景图像。

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

css3文本效果：

　　　　　　text-shadow：h-shadow v-shadow blur color

h1 {text-shadow:2px 2px 8px #FF0000;}

h1 {
color:white;
text-shadow:2px 2px 4px #000000;
}

h1 {
text-shadow:0 0 3px #FF0000;
}

　　　　　　word-wrap自动换行：word-wrap: normal|break-word;

p {word-wrap:break-word;}

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。

所有主流浏览器都支持 word-wrap 属性。

Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。

 

　　　　　　hanging-punctuation：规定把标点符号放在文本整行的开头还是结尾的行框之外：hanging-punctuation: none|first|last|allow-end|force-end;

p
{
hanging-punctuation:first;
}

　　　　　　punctuation-trim规定是否对标点字符进行修剪。

　　　　　　text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。

　　　　　　text-emphasis向元素的文本应用重点标记以及重点标记的前景色。

　　　　　　text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。

　　　　　　text-outline规定文本的轮廓。

　　　　　　text-overflow规定当文本溢出包含元素时发生的事情。

　　　　　　text-break规定文本的换行规则。

　　　　　　word-break规定非中日韩文本的换行规则。

　　　　　　word-wrap允许对长的不可分割的单词进行分割并换行到下一行。

CSS3 @font-face 规则

可以将自己的字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。“自己的”的字体是在 CSS3 @font-face 规则中定义的。

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

 

@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
    ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

字体描述符：font-family

　　　　　　src:定义如何拉伸字体normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded

　　　　　　font-stretch:normal | italic | oblique

　　　　　　font-weight:normal | bold | 100-900

　　　　　　unicode-range:unicode-range 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

 反射：

 .classReflect{ 
 -webkit-box-reflect: below 10px 
 -webkit-gradient(linear, left top, left bottom, from(transparent), 
      to(rgba(255, 255, 255, 0.51))); 
 }

2d转换：

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 需要前缀 -ms-。

方法：translate(),rotate(),scale(),skew(),matrix()

//rotate旋转，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div{
transform:rotate(30deg);
-ms-transform:rotate(30deg);//IE9
-webkit-transform:rotate(30deg);//Safari Chrome
-o-transform:rotate(30deg);//Opera
-moz-transform:rotate(deg);//FF
}

//translate(x,y)方法：移动：从当前位置移动，根据给定的left（x坐标）和top(y坐标)位置参数
//translateX(n):
//translateY(n);
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);        /* Firefox */
}

//scale(x,y)方法：元素尺寸增加或减少，根据给定的宽度和高度
//scaleX(n);
//scaleY(n);
div
{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}

//skew(x,y)方法：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
//skewX(n);
//skewY(n);
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}

//matrix方法：把所有的2D方法组合在一起，需要6个参数，允许旋转缩放移动以及倾斜元素
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}


perspective(n)//定义3D转换元素的透视图

3D旋转：

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持2D转换）。

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg);         /* IE 9 */
-ms-transform-origin:20% 40%;         /* IE 9 */

-webkit-transform: rotate(45deg);    /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;    /* Safari 和 Chrome */

-moz-transform: rotate(45deg);        /* Firefox */
-moz-transform-origin:20% 40%;        /* Firefox */

-o-transform: rotate(45deg);        /* Opera */
-o-transform-origin:20% 40%;        /* Opera */
}

transform-origin属性允许改变被转换元素的位置；必须与transform属性一同使用；

transform-origin:x-axis(left | center | right | length | %) y-axis(top | center | bottom | length | %) z-axis(length)

transform-stye规定被嵌套元素如何在3D空间中显示；

perspective:规定3D元素的透视效果；

perspective-origin:规定3D元素的底部位置

backface-visibility:定义元素在不面对屏幕时是否可见

css3过滤

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

Internet Explorer 9 以及更早的版本，不支持 transition 属性。

Chrome 25 以及更早的版本，需要前缀 -webkit-。

css3过滤是元素从一种样式逐渐变为另一种的效果：规定所希望把效果添加到哪个css属性上、规定效果时长；

当鼠标移出样式会逐渐变回原来的样式

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

//向多个样式添加过滤效果时请添加多个属性并用逗号隔开
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

transition：简写属性，用于在一个属性中设置四个过渡属性；

transition-property：规定应用过渡的css属性的名称；

transition-duration：定义过渡效果花费的时间，默认为0；

transition-timing-function：规定过渡效果的时间曲线，默认是“ease”；

transition-delay:规定过对效果何时开始；默认为0；

div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

div:hover
{
width:200px;
}


//以上代码可以简写为：

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

css3动画：

css3@keyframes规则：在此规则中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果；

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

当在@keyframes中创建动画时需绑定到某个选择器否则不会产生动画效果，至少需要规定动画的名称以及动画时长；

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

改变任意多的样式任意多的次数时 用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

@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"。 
animation-fill-mode 规定对象动画时间之外的状态。

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-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;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}


//以上代码可以简写为：

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

css3多列：

column-count规定元素被分割的列数

column-gap规定列之间的间隔

column-rule设置列之间的宽度，样式，和颜色规则

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9 以及更早的版本不支持多列属性。

//column-count
div
{
-moz-column-count:3;     /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

//column-gap 配合column-count一起使用
.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;

-moz-column-gap:50px; /* Firefox */
-webkit-column-gap:50px; /* Safari and Chrome */
column-gap:50px;
}

//column-rule配合前两种属性一起使用
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}

新的属性：

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 的简写属性。

多用户界面：

　　resize:规定可由用户调整元素大小

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

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

Firefox、Chrome 以及 Safari 支持 resize 属性。

Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。

所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。

div
{
resize:both;
overflow:auto;
}

div
{
box-sizing:border-box;
-moz-box-sizing:border-box;    /* Firefox */
-webkit-box-sizing:border-box;    /* Safari */
width:50%;
float:left;
}

轮廓与边框不同：轮廓不占空间，轮廓可能是非矩形

div
{
margin:20px;
width:150px; 
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

appearance 允许您将元素设置为标准用户界面元素的外观，支持：-moz-appearance  -webkit-appearance appearance: normal|icon|window|button|menu|field;

box-sizing 允许您以确切的方式定义适应某个区域的具体内容。支持：FF：-moz-box-sizing，其他浏览器都支持  box-sizing: content-box|border-box|inherit;
icon 为创作者提供使用图标化等价物来设置元素样式的能力，支持：没有浏览器支持。icon: auto|URL|inherit

nav-down/up/left/right 规定在使用 arrow-down 导航键时向何处导航，支持：只有Opera支持。 目前只有opera支持 nav-down: auto|id|target-name|inherit;
nav-index 设置元素的 tab 键控制次序。支持：只有Opera支持 nav-index: auto|number|inherit;

outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。outline-offset: length|inherit;

resize 规定是否可由用户对元素的尺寸进行调整。Firefox 4+、Chrome 以及 Safari 不支持 resize。resize: none|both|horizontal|vertical;