接触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新特性罗列的更多相关文章

  1. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  2. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  3. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  4. 深入了解css3新特性

    深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

  5. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  6. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  7. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  8. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  9. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

随机推荐

  1. SQL语句添加删除修改字段及一些表与字段的基本操作

    用SQL语句添加删除修改字段 1.增加字段     alter table docdsp    add dspcode char(200)2.删除字段     ALTER TABLE table_NA ...

  2. 关于slideup和slidedown 鼠标多次滑过累积的动画效果

    stop() 方法停止当前正在运行的动画 包括animation动画和slideup/slidedown动画 例如:鼠标经过一个元素时,执行一个slide动画,多次快速经过,不处理的话这个元素会保留累 ...

  3. 最近很火的携程Java 工程师的一道面向对象面试题

    最近这道面试题,传遍程序员各大小园地,本小白特摘抄整理与大家一起学习: 原题: package com.gxlee; public class Base { private String baseNa ...

  4. rmi rpc restful soa 区别

    rmi rpc restful soa 区别 rmi vs rpc 参考文档:http://stackoverflow.com/questions/2728495/what-is-the-differ ...

  5. Spring 3.0就这么简单读书笔记

    一般情况下,spring容器中的大部分Bean都是单实例的,所以一般无须通过@Repository.@Service.@Component等注解的value属性为Bean指定名称,也无须使用@Qual ...

  6. （转）js获取url参数值

    明天有空编辑下 今天做项目遇到js取得url地址问号后面的参数,找了下面的,用着非常好,项目是选项卡样式的,也就是一点击二级分类,底下的同样名字的背景变红(选项卡倍选中) http://www.cnb ...

  7. ORA-16018: cannot use LOG_ARCHIVE_DEST with LOG_ARCHIVE_DEST_n or DB_RECOVERY_FILE_DEST【error收集】

    之前一直没有注意一个事情, 关于设置archive归档路径设置的问题. 设置数据库为归档模式的命令: 1.首先要切换到mount状态: 2.执行alter system archivelog; 3.查 ...

  8. Java反射 - 1(得到类对象的几种方法，调用方法，得到包下的所有类)

    通过反射获得对象的方法 准备工作: 有一个User类如下 package o1; /** * Created by yesiming on 16-11-19. */ public class User ...

  9. sersync做实时同步(第二步)

    配置文件一般都在sersync2的根目录下.为.xml文件 下面做逐行的进行解释说明: <host hostip="localhost" port="8008&qu ...

  10. php过滤参数特殊字符防注入

    分享一例php实现过滤提交的参数数据以防止注入的代码,有需要的朋友参考下. 本节内容: php过滤特符字符,php防注入. in: 后端程序 例子: 代码示例: <?php /** * 安全防范 ...