CSS3新特性罗列

接触css3这么久了，总是到要用的时候直接拿来用，却没有好好地总结归纳一下，那就在这里好好梳理一下吧。

CSS3边框：

圆角边框：

关键：border-radius

圆角边框

立即学习“前端免费学习笔记（深入）”；

CSS3边框阴影：

关键：box-shadow

语法：对象选择器 {box-shadow:[投影方式,] X轴偏移量,Y轴偏移量[,阴影模糊半径][,阴影扩展半径][,阴影颜色]}　

投影方式：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

CSS3边框图片：

 关键：-webkit-border-image

 比如：

立即学习“前端免费学习笔记（深入）”；

p
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

立即学习“前端免费学习笔记（深入）”；

CSS3背景：

background-size 属性规定背景图片的尺寸

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

CSS3多重背景图片

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

CSS3文字效果

CSS3文本阴影

立即学习“前端免费学习笔记（深入）”；

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

立即学习“前端免费学习笔记（深入）”；

CSS3自动换行

立即学习“前端免费学习笔记（深入）”；

p {word-wrap:break-word;}

立即学习“前端免费学习笔记（深入）”；

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

CSS3 2D转换

平移：translate

立即学习“前端免费学习笔记（深入）”；

p
{
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 */
}

立即学习“前端免费学习笔记（深入）”；

旋转：rotate

立即学习“前端免费学习笔记（深入）”；

p
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}

立即学习“前端免费学习笔记（深入）”；

缩放：scale

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

立即学习“前端免费学习笔记（深入）”；

p
{
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

网亚Net!B2B

网亚Net!B2B从企业信息化服务的整体解决方案上提供了实用性的电子商务建站部署，企业无需进行复杂的网站开发，直接使用Net!B2B系列，就能轻松构建具有竞争力的行业门户网站，如果您有特殊需要，系统内置的模板体系和接口体系，让网站可以按照自己的个性要求衍生出庞大的门户服务需求，网亚Net!B2B电子商务建站系统可以让您以希望的方式开展网上服务，无论是为您的客户提供信息服务，新闻服务，产品展示与产品

下载

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

立即学习“前端免费学习笔记（深入）”；

p
{
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 */
}

立即学习“前端免费学习笔记（深入）”；

CSS3 3d转换

rotateX()

沿着X轴旋转

rotateY()

沿着Y轴旋转

CSS3过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果（平缓过渡）。

向宽度、高度和转换添加过渡效果：

立即学习“前端免费学习笔记（深入）”；

p
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

立即学习“前端免费学习笔记（深入）”；

总结：

需要给定一个起点状态和结束状态，

然后给p添加transition:宽 过渡时间，高 过渡时间，转换 过渡时间

立即学习“前端免费学习笔记（深入）”；

transition:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]

立即学习“前端免费学习笔记（深入）”；

CSS3 动画

设定动作@keyframes

立即学习“前端免费学习笔记（深入）”；

@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;}
}

立即学习“前端免费学习笔记（深入）”；

设定动作类

立即学习“前端免费学习笔记（深入）”；

.myaction{
　　animation:myfirst 5s;
}

立即学习“前端免费学习笔记（深入）”；

将动作类加给p

立即学习“前端免费学习笔记（深入）”；

$("...").addClass('.myaction');

立即学习“前端免费学习笔记（深入）”；

注意：

语法：

立即学习“前端免费学习笔记（深入）”；

animation:name duration timing-function delay iteration-count direction

立即学习“前端免费学习笔记（深入）”；

name:@keyframes的名称

duration:规定完成动画所花费的时间，以秒或毫秒计。

timing-function:规定动画的速度曲线。

delay：动画开始之前的延迟，秒。

iteration-count:规定动画播放的次数：具体数值或infinite（无限次）。

direction:规定是否轮流反向播放动画。normal正常播放，alternate轮流反向播放。

CSS3多列：

创建多个列对文本进行布局

立即学习“前端免费学习笔记（深入）”；

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

CSS3用户界面

立即学习“前端免费学习笔记（深入）”；

p
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}

立即学习“前端免费学习笔记（深入）”；

CSS3的新特性就梳理到这里啦。个人觉得转换和动画是重点，需要好好掌握。

更多CSS3新特性罗列 相关文章请关注PHP中文网！