CSS3新特性罗列
接触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的新特性就梳理到这里啦。个人觉得转换和动画是重点，需要好好掌握。
CSS3新特性罗列的更多相关文章
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
随机推荐
- 字符串格式化 String.format() 案例
转换符 转换符 说 明 %s 字符串类型 %c 字符类型 %b 布尔类型 %d 整数类型(十进制 ...
- 简单竖向Tab选项卡
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- lucene实战（第二版）学习笔记
初识Lucene 构建索引 为应用程序添加搜索功能 Lucene的分析过程
- IIS与ASP.NET 通信机制深度剖析
IIS5.X缺点: ISAPI 动态连接库被加载到InetInfo.exe 进程中,它和工作进程之间是一种典型的跨进程通信方式,尽管采用命名管道,但是仍然会带来性能的瓶颈. 所有的 ASP.NET 应 ...
- 使用Application_Error捕获站点错误并写日志
Global.ascx页面使用以下方法即可捕获应用层没有try cath的错误 protected void Application_Error(Object sender, EventArgs e) ...
- 历史执行Sql语句性能分析 CPU资源占用时间分析
SELECT HIGHEST_CPU_QUERIES.PLAN_HANDLE, HIGHEST_CPU_QUERIES.TOTAL_WORKER_TIME, Q.DBID, ...
- HDU_2068_RPG错排
Problem Description 今年暑假杭电ACM集训队第一次组成女生队,其中有一队叫RPG,但做为集训队成员之一的野骆驼竟然不知道RPG三个人具体是谁谁.RPG给他机会让他猜猜,第一次猜:R ...
- Cacti添加IO模板并监控磁盘IO
1.下载Cacti_Net-SNMP_DevIO_v3.1.zip 下载Cacti_Net-SNMP_DevIO_v3.1.zip,解压并上传net-snmp_devio.xml到/resource/ ...
- 常用的JavaScript正则匹配规则代码收藏，很实用
收集一些常用的JavaScript正则表达式匹配规则,比如匹配电话号码.Email.中文字符.身份证号.邮编.QQ号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水平菜,老是自己写不出 ...
- PHP的抽象类和接口
抽象类与接口相似,都是一种比较特殊的类.抽象类是一种特殊的类,而接口也是一种特殊的抽象类.它们通常配合面向对象的多态性一起使用.虽然声明和使用都比较容易,但它们的作用在理解上会困难一点. ①抽象类 在 ...