CSS3中的新特性
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3中的新特性
⼀、CSS3新属性
CSS3还不属于W3C标准，所以不同浏览器的⽀持程度也不相同，对于不同浏览器，写法也不同，不同内核的浏览器要加不同的前缀，如下：
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
1、CSS3边框
边框添加了三种特性，圆⾓边框border-radius，盒阴影box-shadow，图⽚边框border-image。
圆⾓边框border-radius语法：border-radius: 1-4 length|% / 1-4 length|%;默认值：0;。
解释：符号"/"前后分别表⽰长半轴与短半轴的长度，x轴为长半轴。
每个半径的四个值的顺序是：左上⾓，右上⾓，右下⾓，左下⾓。
如果省略左下⾓，与右上⾓是相同的。
如果省略右下⾓，与左上⾓是相同的。
如果省略右上⾓，与左上⾓是相同的。
也可以使⽤border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius来分别设置。
盒阴影box-shadow语法：box-shadow: h-shadow v-shadow blur spread color inset;默认值：none 100% 1 0 stretch;。
值描述测试
h-shadow必需。
⽔平阴影的位置。
允许负值。
v-shadow必需。
垂直阴影的位置。
允许负值。
blur可选。
模糊距离。
spread可选。
阴影的尺⼨。
color可选。
阴影的颜⾊。
请参阅 CSS 颜⾊值。
inset可选。
将外部阴影 (outset) 改为内部阴影。
boxShadow 属性把⼀个或多个下拉阴影添加到框上。
该属性是⼀个⽤逗号分隔阴影的列表，每个阴影由 2-4 个长度值、⼀个可选的颜⾊值和⼀个可选的 inset 关键字来规定。
省略长度的值是 0。
图⽚边框border-image语法：border-image: source slice width outset repeat;默认值：none 100% 1 0 stretch;。
border-image属性是速记属性，⽤于设置 , , , 和的值。
值描述测试
border-image-source⽤在边框的图⽚的资源位置。
border-image-slice图⽚边框向内偏移，⽤于设置图像的裁切⽅式。
border-image-width图⽚边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
关于切割⽅法的详细说明：使⽤九分法切割，⼜叫做九分构图法。
通过把图⽚切割四⼑来区分图⽚的不同区域。
（可对⽐(clip:rect(auto, auto, auto, auto))裁切属性。
）
如右图所⽰，可以在第⼆个参数中设置裁切的⽅法，同⼀般的设置⼀致，从上、右、下、左的顺序裁切。
更多详细内容请参考和。
2、CSS3背景
CSS3对背景做了拓展，具体如下：
background-clip：规定背景的绘制区域。
语法：background-clip: border-box|padding-box|content-box;默认值：border-box;。
background-origin：相对于内容框来定位背景图像。
语法：background-origin: padding-box|border-box|content-box;默认值：padding-box;。
值描述测试
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。
background-size：规定背景图像的尺⼨。
语法：background-size: length|percentage|cover|contain;默认值：auto;。
值描述测试
length设置背景图像的⾼度和宽度。
第⼀个值设置宽度，第⼆个值设置⾼度。
如果只设置⼀个值，则第⼆个值会被设置为 "auto"。
percentage以⽗元素的百分⽐来设置背景图像的宽度和⾼度。
第⼀个值设置宽度，第⼆个值设置⾼度。
如果只设置⼀个值，则第⼆个值为 "auto"。
cover把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许⽆法显⽰在背景定位区域中。
contain把图像图像扩展⾄最⼤尺⼨，以使其宽度和⾼度完全适应内容区域。
背景图⽚还有⼀个新特性是可以叠加多张，⽤逗号隔开，参数为url("url"),url("url")。
3、CSS3⽂本效果
text-shadow⽂字阴影，语法：text-shadow: h-shadow v-shadow blur color;默认值：none。
text-shadow属性向⽂本添加⼀个或多个阴影。
该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和⼀个可选的颜⾊值进⾏规定。
省略的长度是 0。
值描述测试
h-shadow必需。
⽔平阴影的位置。
允许负值。
v-shadow必需。
垂直阴影的位置。
允许负值。
blur可选。
模糊的距离。
color可选。
阴影的颜⾊。
参阅。
text-overflow⽂字溢出，语法：text-overflow: clip|ellipsis|string;默认值：clip。
分别代表直接裁切溢出的⽂字，⽤省略号代替溢出的⽂字，⽤指定的字符串代表溢出的⽂字。
其他新的⽂本属性
属性描述CSS
规定标点字符是否位于线框之外。
3
规定是否对标点字符进⾏修剪。
3
text-align-last设置如何对齐最后⼀⾏或紧挨着强制换⾏符之前的⾏。
3
向元素的⽂本应⽤重点标记以及重点标记的前景⾊。
3
规定当 text-align 设置为 "justify" 时所使⽤的对齐⽅法。
3
规定⽂本的轮廓。
3
规定当⽂本溢出包含元素时发⽣的事情。
3
向⽂本添加阴影。
3
规定⽂本的换⾏规则。
3
规定⾮中⽇韩⽂本的换⾏规则。
3
允许对长的不可分割的单词进⾏分割并换⾏到下⼀⾏。
3
4、CSS3字体
CSS3字体允许您使⽤⾃⼰特有的字体，⽽不必使⽤web-safe规定的字体。
在需要使⽤字体是浏览器会⾃动下载您的字体⽂件供页⾯显⽰。
在Style中使⽤@font-face来定义⾃⼰的字体。
<!DOCTYPE html>
<html>
<head>
<style>
@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('/example/css3/Sansation_Bold.ttf')
,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>注释：</b>Internet Explorer 9+ ⽀持新的 @font-face 规则。
Internet Explorer 8 以及更早的版本不⽀持新的 @font-face 规则。
</p> </body>
</html>
注意：普通⽂字和粗体⽂字是可以分开定义的。
@font-face更多内容：
描述符值描述
font-family name必需。
规定字体的名称。
src URL必需。
定义字体⽂件的 URL。
font-stretch normal, condensed, ultra-condensed, extra-
condensed,
semi-condensed,expanded, semi-expanded,
extra-expanded, ultra-expanded
可选。
定义如何拉伸字体。
默认是 "normal"。
font-style ormal, italic, oblique可选。
定义字体的样式。
默认是 "normal"。
font-weight normal, bold, 100, 200, 300, 400, 500, 600, 700, 800,
900可选。
定义字体的粗细。
默认是 "normal"。
unicode-range unicode-range可选。
定义字体⽀持的 UNICODE 字符范围。
默认是 "U+0-
10FFFF"。
5、CSS3 2D 3D转换
通过 CSS3 转换，我们能够对元素进⾏移动、缩放、转动、拉长或拉伸以及3D转换。
转换语法：transform: none|transform-functions;默认值：none;。
多个函数叠加使⽤中间⽤空格隔开。
所有transform-functions：
值描述测试none定义不进⾏转换。
matrix(n,n,n,n,n,n)定义 2D 转换，使⽤六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使⽤ 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是⽤ X 轴的值。
translateY(y)定义转换，只是⽤ Y 轴的值。
translateZ(z)定义 3D 转换，只是⽤ Z 轴的值。
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定⾓度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。
测试
关于旋转rotate，是以图形的中⼼为旋转点，顺时针为正，逆时针为负，⾓度单位为deg。
关于倾斜skew，图形的中⼼作为原点，画x轴与y轴，第⼀个参数是y轴逆时针旋转的⾓度，旋转后y轴上的长度不变，即图像所占⾼度不变（也即倾斜线的在y轴上的投影与原来相同）。
第⼆个参数是x轴顺时针旋转的⾓度，旋转后x轴上的长度不变，即图像所占宽度不变（也即倾斜线的在x轴上的投影与原来相同）。
skewX 是上⾯的第⼀个参数，skewY是上⾯的第⼆个参数。
重头戏是matrix矩阵，上⾯所有的⽅法都是对matrix矩阵的实现，只不过变得更直观点。
其实上⾯的所有操作都可以使⽤matrix来完成，matrix可以⽤⼀个3x3的矩阵来表⽰，前两⾏为那六个参数，最后⼀⾏为0,0,1。
假设原来的坐标点为[x,y,z]，那么新的坐标点即为matrix* [x,y,z]'，其中，2D转换，z为1。
详细内容可参考与。
上⾯提到了以中⼼为旋转点这个概念，这就有个问题了，只能按中⼼点来旋转吗？答案是否定的，transform-origin正是为了设置基点⽽出现的。
语法：transform-origin: x-axis y-axis z-axis;默认值：50% 50% 0;左上⾓坐标为0,0。
值描述
x-axis 定义视图被置于 X 轴的何处。
可能的值：left, center, right, length, %
y-axis 定义视图被置于 Y 轴的何处。
可能的值：top, center, bottom, length, %
z-axis 定义视图被置于 Z 轴的何处。
可能的值：length
关于3D旋转，还有⼀些特殊的设置。
transform-style：属性规定如何在 3D 空间中呈现被嵌套的元素。
语法：transform-style: flat|preserve-3d;默认值：flat;。
该属性必须与transform⼀起使⽤。
flat是⼦元素不保留3D位置，preserve-3d是⼦元素保留3D位置。
perspective：定义 3D 元素距视图的距离，以像素计。
该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其⼦元素会获得透视效果，⽽不是元素本⾝。
perspective 属性只影响 3D 转换元素。
语法：perspective: number|none;默认值：none;。
number以像素计。
请与perspective-origin属性⼀同使⽤该属性，这样您就能够改变 3D 元素的底部位置。
perspective-origin：定义 3D 元素所基于的 X 轴和 Y 轴。
该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其⼦元素会获得透视效果，⽽不是元素本⾝。
语法：perspective-origin: x-axis y-axis;默认值：50% 50%;。
参数可能值同上。
backface-visibility：定义当元素不⾯向屏幕时是否可见。
如果在旋转元素不希望看到其背⾯时，该属性很有⽤。
语法：backface-visibility: visible|hidden;默认值：visible;。
6、CSS3过渡
上⾯说的是转换，当我们需要看到转换的过程的时候就要借助过渡了。
CSS3中，我们为了添加某种效果可以从⼀种样式转变到另⼀个的时候，⽆需使⽤Flash动画或JavaScript。
CSS3 过渡是元素从⼀种样式逐渐改变为另⼀种的效果。
要实现这⼀点，必须规定两项内容：规定效果添加到哪个CSS 属性上、规定效果的时长。
⽐较常⽤的是⿏标滑过某个元素时，这个元素呈现动态的效果。
如：
<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<div>请把⿏标指针放到黄⾊的 div 元素上，来查看过渡效果。
</div>
<p><b>注释：</b>本例在 Internet Explorer 中⽆效。
</p>
</body>
</html>
通过设置伪类:hover的样式，使得在⿏标移动上的时候样式改变，添加transition，使得我们可以看到样式变化的过程。
当⿏标移开时，效果复位，同样有变化的过程。
如果需要有多个过渡效果，不同效果之间使⽤逗号隔开（注意上⾯转换中，要实现多个变形叠加需要使⽤空格隔开，这⾥不使⽤空格是因为空格后，后⾯的属性会覆盖前⾯的属性，如果属性是作⽤在同⼀个效果上的话，⽽逗号隔开则是同时作⽤在同⼀效果上）。
transition语法：transition: property duration timing-function delay;默认值：all 0 ease 0;。
transition 属性是⼀个简写属性，⽤于设置四个过渡属性：
、、、。
其中property⽤于设置作⽤的属性，none,all或者属性名，多个⽤逗号隔开。
duration⽤于设置效果时长，单位为s或者ms。
timing-function⽤于设置速度曲线，有以下⼏种：
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
值描述
linear规定以相同速度开始⾄结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义⾃⼰的值。
可能的值是 0 ⾄ 1 之间的数值。
其中cubic-bezier是⾃定义，使⽤，⽤法见。
delay⽤于设置开始时间，效果延迟多少秒开始。
单位为s或者ms。
7、CSS3动画
上⾯的过渡是在样式改变时才会发⽣的，但是当我们需要直接启动⼀个动画效果时就需要使⽤CSS3的动画了。
通过 CSS3，我们能够创建动画，这可以在许多⽹页中取代动画图⽚、Flash 动画以及 JavaScript。
如需在 CSS3 中创建动画，需要使⽤ @keyframes 规则。
@keyframes 规则⽤于创建动画。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产⽣动画效果。
通过规定⾄少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称、规定动画的时长。
时长默认为0。
动画是使元素从⼀种样式逐渐变化为另⼀种样式的效果。
您可以改变任意多的样式任意多的次数。
请⽤百分⽐来规定变化发⽣的时间，或⽤关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器⽀持，您应该始终定义0% 和 100% 选择器。
⼀个简单的⽰例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中⽆效。
</p>
<div></div>
</body>
</html>
@keyframes语法：@keyframes animationname {keyframes-selector {css-styles;}}
定义过keyframes后，就可以在样式中使⽤animation引⽤了。
animation语法：animation: name duration timing-function delay iteration-count direction;默认：none 0 ease 0 1 normal;。
值描述
规定需要绑定到选择器的 keyframe 名称。
规定完成动画所花费的时间，以秒或毫秒计。
规定动画的速度曲线。
规定在动画开始之前的延迟。
规定动画应该播放的次数。
infinite为⽆限。
规定是否应该轮流反向播放动画。
direction有两种，normal|alternate;normal是循环播放，alternate是轮换正反向播放，第⼀次正向第⼆次反向。
animation-play-state: paused|running;默认值running;。
规定动画是暂停还是播放，可以⽤javascript控制。
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
其属性值是由逗号分隔的⼀个或多个填充模式关键词。
语法：animation-fill-mode : none | forwards | backwards | both;默认值：none;。
none:不改变默认⾏为。
forwards:当动画完成后，保持最后⼀个属性值（在最后⼀个关键帧中定义）。
backwards:在 animation-delay 所
指定的⼀段时间内，在动画显⽰之前，应⽤开始属性值（在第⼀个关键帧中定义）。
both:向前和向后填充模式都被应⽤。
8、CSS3多列
通过 CSS3，您能够创建多个列来对⽂本进⾏布局 - 就像报纸那样！
<style>
.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;
}
</style>
属性描述CSS
规定元素应该被分隔的列数。
3
规定如何填充列。
3
规定列之间的间隔。
3
设置所有 column-rule-* 属性的简写属性。
3
规定列之间规则的颜⾊。
3
规定列之间规则的样式。
3
规定列之间规则的宽度。
3
规定元素应该横跨的列数。
3
规定列的宽度。
3
规定设置 column-width 和 column-count 的简写属性。
3
9、CSS3⽤户界⾯
CSS3 Resizing：规定是否可由⽤户调整元素尺⼨。
CSS3 Box Sizing：以确切的⽅式定义适应某个区域的具体内容。
规定两个并排的带边框⽅框：
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据左半部分。
</div>
<div class="box">这个 div 占据右半部分。
</div>
</div>
</body>
</html>
CSS3 Outline Offset：对轮廓进⾏偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：轮廓不占⽤空间、轮廓可能是⾮矩形。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 和 Opera 不⽀持 support outline-offset 属性。
</p> <div>这个 div 在边框边缘之外 15 像素处有⼀个轮廓。
</div>
</body>
</html>
下⾯的表格列出了所有的转换属性：
属性描述CSS 允许您将元素设置为标准⽤户界⾯元素的外观3
允许您以确切的⽅式定义适应某个区域的具体内容。
3
为创作者提供使⽤图标化等价物来设置元素样式的能⼒。
3
规定在使⽤ arrow-down 导航键时向何处导航。
3
设置元素的 tab 键控制次序。
3
规定在使⽤ arrow-left 导航键时向何处导航。
3
规定在使⽤ arrow-right 导航键时向何处导航。
3
规定在使⽤ arrow-up 导航键时向何处导航。
3
对轮廓进⾏偏移，并在超出边框边缘的位置绘制轮廓。
3
规定是否可由⽤户对元素的尺⼨进⾏调整。
3。