首页 > 网页设计

CSS3新特性罗列

2017-01-11 00:01:33

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

CSS3边框:

圆角边框:

关键:border-radius

<!DOCTYPE html><html><head><style> div{text-align:center;border:2px solid #a1a1a1;padding:10px 40px;width:350px;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;}</style></head><body><div>圆角边框</div></body></html>

 

CSS3边框阴影:

关键:box-shadow

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

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

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

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

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

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

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

 

 

CSS3边框图片:

 关键:-webkit-border-image

 比如:

div{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 属性规定背景图片的尺寸

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

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

背景图片的定位区域

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多重背景图片

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):

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

 

CSS3 2D转换

平移:translate

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

旋转:rotate

div{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 轴)参数:

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

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

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

 

CSS3 3d转换

rotateX()

沿着X轴旋转

rotateY()

沿着Y轴旋转

 

CSS3过渡

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

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

div{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;}

 

总结:

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

然后给div添加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;
}

将动作类加给DIV

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

注意:

语法:

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

name:@keyframes的名称

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

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

timing-function的值描述
linear匀速
ease慢快慢
ease-in  低速开始
ease-out低速结束
ease-in-out低速开始和结束
cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值,从0到1

 

 

 

 

 

 

 

delay:动画开始之前的延迟,秒。

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

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

 

CSS3多列:

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

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

 

CSS3用户界面

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

 

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