接触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
比如:
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):
<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}p{font-family:myFirstFont;}</style>
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
通过 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:规定动画的速度曲线。
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多列:
创建多个列对文本进行布局
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中文网!