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

CSS3边框：

圆角边框：

关键：border-radius

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. text-align:center;
  8. border:2px solid #a1a1a1;
  9. padding:10px 40px;
  10. width:350px;
  11. border-radius:25px;
  12. -moz-border-radius:25px;
  13. -webkit-border-radius:25px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18.  
  19. <div>圆角边框</div>
  20.  
  21. </body>
  22. </html>

CSS3边框阴影：

关键：box-shadow

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

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

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

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

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

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

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

CSS3边框图片：

关键：-webkit-border-image

比如：

  1. div
  2. {
  3. border-image:url(border.png) 30 30 round;
  4. -moz-border-image:url(border.png) 30 30 round; /* Firefox */
  5. -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
  6. -o-border-image:url(border.png) 30 30 round; /* Opera */
  7. }

CSS3背景：

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

  1. div
  2. {
  3. background:url(bg_flower.gif);
  4. -moz-background-size:63px 100px; /* 老版本的 Firefox */
  5. background-size:63px 100px;
  6. background-repeat:no-repeat;
  7. }

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

  1. div
  2. {
  3. background:url(bg_flower.gif);
  4. background-repeat:no-repeat;
  5. background-size:100% 100%;
  6. -webkit-background-origin:content-box; /* Safari */
  7. background-origin:content-box;
  8. }

CSS3多重背景图片

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

CSS3文字效果

CSS3文本阴影

  1. h1
  2. {
  3. text-shadow: 5px 5px 5px #FF0000;
  4. }

CSS3自动换行

  1. p {word-wrap:break-word;}

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

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

  1. <style>
  2. @font-face
  3. {
  4. font-family: myFirstFont;
  5. src: url('Sansation_Light.ttf'),
  6.      url('Sansation_Light.eot'); /* IE9+ */
  7. }
  8.  
  9. div
  10. {
  11. font-family:myFirstFont;
  12. }
  13. </style>

CSS3 2D转换

平移：translate

  1. div
  2. {
  3. transform: translate(50px,100px);
  4. -ms-transform: translate(50px,100px);        /* IE 9 */
  5. -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
  6. -o-transform: translate(50px,100px);        /* Opera */
  7. -moz-transform: translate(50px,100px);        /* Firefox */
  8. }

旋转：rotate

  1. div
  2. {
  3. transform: rotate(30deg);
  4. -ms-transform: rotate(30deg);        /* IE 9 */
  5. -webkit-transform: rotate(30deg);    /* Safari and Chrome */
  6. -o-transform: rotate(30deg);        /* Opera */
  7. -moz-transform: rotate(30deg);        /* Firefox */
  8. }

缩放：scale

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

  1. div
  2. {
  3. transform: scale(2,4);
  4. -ms-transform: scale(2,4);    /* IE 9 */
  5. -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
  6. -o-transform: scale(2,4);    /* Opera */
  7. -moz-transform: scale(2,4);    /* Firefox */
  8. }

翻折：skew

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

  1. div
  2. {
  3. transform: skew(30deg,20deg);
  4. -ms-transform: skew(30deg,20deg);    /* IE 9 */
  5. -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
  6. -o-transform: skew(30deg,20deg);    /* Opera */
  7. -moz-transform: skew(30deg,20deg);    /* Firefox */
  8. }

CSS3 3d转换

rotateX()

沿着X轴旋转

rotateY()

沿着Y轴旋转

CSS3过渡

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

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

  1. div
  2. {
  3. transition: width 2s, height 2s, transform 2s;
  4. -moz-transition: width 2s, height 2s, -moz-transform 2s;
  5. -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  6. -o-transition: width 2s, height 2s,-o-transform 2s;
  7. }

总结：

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

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

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

CSS3 动画

设定动作@keyframes

  1. @keyframes myfirst
  2. {
  3. 0%   {background:red; left:0px; top:0px;}
  4. 25%  {background:yellow; left:200px; top:0px;}
  5. 50%  {background:blue; left:200px; top:200px;}
  6. 75%  {background:green; left:0px; top:200px;}
  7. 100% {background:red; left:0px; top:0px;}
  8. }

设定动作类

  1. .myaction{
    　　animation:myfirst 5s;
    }

将动作类加给DIV

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

注意：

语法：

  1. 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多列：

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

  1. div
  2. {
  3. -moz-column-count:3;     /* Firefox */
  4. -webkit-column-count:3; /* Safari 和 Chrome */
  5. column-count:3;
  6. }

CSS3用户界面

  1. div
  2. {
  3. border:2px solid;
  4. padding:10px 40px;
  5. width:300px;
  6. resize:both;
  7. overflow:auto;
  8. }

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. Tomcat jdbc pool配置

    Tomcat jdbc pool是apache在tomcat7版本中启用的新连接池,用它来解决以往DBCP无法解决的一些问题. Tomcat jdbc pool的优点: (1)    tomcat j ...

  2. Android项目中如何用好构建神器Gradle？（转）

    最近在忙团队并行开发的事情,主要是将各个团队的代码分库,一方面可以降低耦合,为后面模块插件化做铺垫,另一方面采用二进制编译,可以加快编译速度.分库遇到了一些问题,很多都要通过Gradle脚本解决,所以 ...

  3. 自定义Toast

    简易自定义Toast public class MainActivity extends ListActivity );//边角         gradientDrawable.setGradien ...

  4. eclipse - copy类的全名

    由于多次操作,感觉eclipse应该提供这个功能,网上搜一下,发现需要安装插件. 下载地址为 http://www.jave.de/eclipse/copyfully/copyfully_1.2.0. ...

  5. mysql存储过程controller的not found造成混乱的解决办法

    打草稿 问题:对于select  var1 into var2 ,单select的结果为空的时候(空的意思是没有找到数据,不是该值为null) ,会触发controller的not found 当游标 ...

  6. iOS 网络与多线程－－5.异步Post方式的网络请求(非阻塞)

    通过Post请求方式,异步获取网络数据,异步请求不会阻塞主线程,而会建立一个新的线程来操作. 代码如下 ViewController.h文件 #import <UIKit/UIKit.h> ...

  7. python zip文件密码爆破

    #!/usr/bin/env # coding=UTF-8 import zipfile import threading import os import sys class CrackZip: d ...

  8. WebBasic-表单

    用来提交数据 <form></form> 属性:action:提交的url  method:表单数据提交的方式  enctype:表单数据的编码方式 表单控件 --input元 ...

  9. 武汉科技大学ACM：1008: 明明的随机数

    Problem Description 明明想在学校中请一些同学一起做一项问卷 调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤100),对于其中重复的数字,只保留一个, ...

  10. libusb简介

    概述 libusb是一个C库,它提供了通用的访问USB设备. 它的目的是供开发人员使用方便的生产与USB通信硬件的应用程序. 可移植的: 使用一个跨平台API,它提供了访问USB设备在Linux上,O ...