什么是CSS3？

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

相信CSS3的时代马上就要到来了！

IE党注意了：不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器的最高版本。

  1.  body{
  2.      background:#000;
  3.      }
  4.  
  5.  h1 {
  6.      text-align:center;
  7.      color:#fff;
  8.      font-size:48px;
  9.     font-family: 'Fruktur', cursive;
  10.     text-shadow: 1px  1px 1px #ccc,
  11.                    0 0 10px #fff,
  12.                     0 0 20px #fff,
  13.                     0 0 30px #fff,
  14.                     0 0 40px #ff00de,
  15.                     0 0 70px #ff00de,
  16.                     0 0 80px #ff00de,
  17.                     0 0 100px #ff00de,
  18.                     0 0 150px #ff00de;
  19.  
  20.      transform-style: preserve-3d;
  21.      -moz-transform-style: preserve-3d;
  22.      -webkit-transform-style: preserve-3d;
  23.      -ms-transform-style: preserve-3d;
  24.      -o-transform-style: preserve-3d;               
  25.  
  26.          animation: run  ease-in-out 9s infinite;
  27.     -moz-animation: run  ease-in-out 9s infinite ;
  28.  -webkit-animation: run  ease-in-out 9s infinite;
  29.  -ms-animation: run  ease-in-out 9s infinite;    
  30.  
  31.       -o-animation: run  ease-in-out 9s infinite;
  32.  }
  33.  
  34.  @keyframes run {
  35.        0% {
  36.          transform:rotateX(-5deg) rotateY(0);
  37.        }
  38.      50% {
  39.          transform:rotateX(0) rotateY(180deg);
  40.           text-shadow: 1px  1px 1px #ccc,
  41.                    0 0 10px #fff,
  42.                     0 0 20px #fff,
  43.                     0 0 30px #fff,
  44.                     0 0 40px #3EFF3E,
  45.                     0 0 70px #3EFFff,
  46.                     0 0 80px #3EFFff,
  47.                     0 0 100px #3EFFee,
  48.                     0 0 150px #3EFFee;
  49.  
  50.        }
  51.        100% {
  52.          transform:rotateX(5deg) rotateY(360deg);
  53.        }
  54.      }
  55.  
  56.  @-moz-keyframes run {
  57.        0% {
  58.          -moz-transform:rotateX(-5deg) rotateY(0);    
  59.  
  60.        }
  61.      50% {
  62.          -moz-transform:rotateX(0) rotateY(180deg);
  63.           text-shadow: 1px  1px 1px #ccc,
  64.                    0 0 10px #fff,
  65.                     0 0 20px #fff,
  66.                     0 0 30px #fff,
  67.                     0 0 40px #3EFF3E,
  68.                     0 0 70px #3EFFff,
  69.                     0 0 80px #3EFFff,
  70.                     0 0 100px #3EFFee,
  71.                     0 0 150px #3EFFee;
  72.  
  73.        }
  74.        100% {
  75.          -moz-transform:rotateX(5deg) rotateY(360deg);
  76.        }
  77.      }
  78.  
  79.  @-webkit-keyframes run {
  80.        0% {
  81.          -webkit-transform:rotateX(-5deg) rotateY(0);    
  82.  
  83.        }
  84.      50% {
  85.          -webkit-transform:rotateX(0) rotateY(180deg);
  86.           text-shadow: 1px  1px 1px #ccc,
  87.                    0 0 10px #fff,
  88.                     0 0 20px #fff,
  89.                     0 0 30px #fff,
  90.                     0 0 40px #3EFF3E,
  91.                     0 0 70px #3EFFff,
  92.                     0 0 80px #3EFFff,
  93.                     0 0 100px #3EFFee,
  94.                     0 0 150px #3EFFee;
  95.  
  96.        }
  97.        100% {
  98.          -webkit-transform:rotateX(5deg) rotateY(360deg);
  99.        }
  100.      }
  101.  @-ms-keyframes run {
  102.        0% {
  103.          -ms-transform:rotateX(-5deg) rotateY(0);    
  104.  
  105.        }
  106.      50% {
  107.          -ms-transform:rotateX(0) rotateY(180deg);    
  108.  
  109.        }
  110.        100% {
  111.          -ms-transform:rotateX(5deg) rotateY(360deg);
  112.        }
  113.      }
  114.  
  115.  </style>
  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>Hello CSS3</title>
  6.  <link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
  7.  <link href="style.css" rel="stylesheet" type="text/css">
  8.  </head>
  9.  <body>
  10.  <h1>Hello CSS3</h1>
  11.  </body>
  12.  </html>

CSS3能做什么？

CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

CSS3都有哪些强大功能呢？各位小伙伴们先来一睹为快吧！

  1. 选择器
  2. 以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。
  1. 圆角效果
  2. 以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。
  1. 块阴影与文字阴影
  2. 可以对任意DIV和文字增加投影效果。
  1. 色彩
  2. CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。
  1. 渐变效果
  2. 以前只能用Photoshop做出的图片渐变效果，现在可以用CSS写出来了。IE中的滤镜也可以实现。
  1. 个性化字体
  2. 网页上的字体太单一？使用@Font-Face 轻松实现定制字体。
  1. 多背景图
  2. 一个元素上添加多层背景图片。
  1. 边框背景图
  2. 边框应用背景图片。
  1. 变形处理
  2. 你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。
  1. 多栏布局
  2. 可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。
  1. 媒体查询
  2. 针对不同屏幕分辨率，应用不同的样式。
  3.  
  4. 等等 ……
  5.  
  6. 很神奇吧！CSS3使代码更简洁、更高效。可以极大的提高工作效率，打造更高级的用户体验。使web应用的界面设计进入一个新的台阶。

十天精通CSS3(1)的更多相关文章

  1. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  2. 十天精通CSS3学习笔记 part3

    第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. ...

  3. 十天精通CSS3学习笔记 part2

    第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS ...

  4. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

  5. 十天精通CSS3(12)

    自由缩放属性resize 为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小.到目前为止,可以使用overflo ...

  6. 十天精通CSS3(11)

    Media Queries——媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来访问你的网站.尽管你无法保证一个 ...

  7. 十天精通CSS3(10)

    多列布局——Columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它 ...

  8. 十天精通CSS3(9)

    Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同 ...

  9. 十天精通CSS3(8)

    变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...

  10. 十天精通CSS3(7)

    :enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等.在默认情况之下,这些表单元素都处在可用状态.那 ...

随机推荐

  1. Oralce分析函数

    1 列传行  listagg(city,',')  within GROUP (order by city)    over (partition by nation) rank with temp ...

  2. 今日Java——Cay Horstmann访谈

    这是本人在InfoQ中文站审校的文章,原文链接是:http://www.infoq.com/cn/articles/java_cay_horstmann,感觉内容很不错,分享给大家看看. 近日Info ...

  3. 原生js（三）

    客户端js的时间线: 1.web浏览器创建Document对象,开始解析html和文本.生成Element对象和Text节点添加到文档中.这个阶段的document.readystate==" ...

  4. SharpGL学习笔记(五) 视口变换

    视口变换主是将视景体内投影的物体显示到二维的视口平面上. 在计算机图形学中,它的定义是将经过几何变换, 投影变换和裁剪变换后的物体显示于屏幕指定区域内. 前面我们讨论过的透视投影, 正射投影, 它们都 ...

  5. 异构GoldenGate 12c 双向复制配置

    1.配置window,添加checkpoint表(本文windows和linux互为source和target) GGSCI (WIN-GM5PVS1CILH) 1> view param ./ ...

  6. LeetCode 81 Search in Rotated Sorted Array II（循环有序数组中的查找问题）

    题目链接:https://leetcode.com/problems/search-in-rotated-sorted-array-ii/#/description   姊妹篇:http://www. ...

  7. sencha touch 在线实战培训 第一期 第七节

    2014.1.13晚上8点过一点开的课 本期培训一共八节,前三堂免费,后面的课程需要付费才可以观看. 本节内容:             非结构化数据传输 通过js调取phonegap实现图片采集.上 ...

  8. 使用Btrace来动态监控方法的参数和返回值

    btrace简介: btrace是一种动态跟踪分析一个运行中的Java应用程序的工具,它基于java的探针技术动态地向目标应用程序的字节码注入追踪代码(字节码追踪),这些追踪字节码追踪代码使用Java ...

  9. vmware12如何安装macOSX虚拟机

    vmware默认是不支持创建OSX系统的虚拟机的,但是安装一个名为unlocker208的破解补丁之后就可以安装了. 下载的地址和使用的方法参考这个地址:http://www.jb51.net/sof ...

  10. [MySQL]修改root密码的4种方法(以windows为例)

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...