最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CSS属性或规则尚未成为W3C标准的一部分,尽管现代浏览器已经支持了众多的CSS3属性,但CSS3目前还没得到全面的支持,所以我们需要使用一些特定的声明来提升兼容性,遗憾的是IE8及以下浏览器目前均不支持CSS3。

 1.CSS3标准

为加强浏览器兼容性,在使用CSS3属性时尽量使用以下特定声明:

* Gecko(Mozilla/Firefox)浏览器的前缀: -moz-
   * Webkit (Safari/Chrome)浏览器的前缀: -webkit-

例如边框圆角属性的写法:

.round {

border: 5px solid #ccc;

-moz-border-radius: 15px;      /* Gecko browsers */

-webkit-border-radius: 15px;   /* Webkit browsers */

border-radius:15px;            /* W3C syntax */

}

 2. RGBA颜色模式

CSS3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加RGBA颜色值,并且允许通过对RGBA颜色值设定alpha通道的方法来实现将半透明效果。透明度的取值范围在0到1之间,0是完全不透明,1是颜色完全透明。

说到透明度,不得不提opacity,也是用来设置透明度的,那它与RGBA的透明度又有什么区别呢?

1.opacity的透明度是指整个元素的透明度,且我们在父元素中使用了opacity,那么其后代元素都会受其影响。

2.使用alpha通道对元素设定透明度时,可以单独针对元素的背景色和文字颜色等来指定透明度,不会对后代产生影响。

 3. 几个应该关注的CSS3“主流”的属性

1.圆角(border-radius)

圆角是最常见的视觉效果之一,按钮和背景边框使用圆角可以使元素变得生动。CSS3之前传统的修饰效果方式是使用图片,不仅影响加载速度而且不易维护,现在只需要设置圆角属性就可以了,核心只有简单的一句:border-radius:10px 10px 10px 10px,只要简单改动参数的值即可灵活改变圆角大小,稍加改动边长和半径可以变换出半圆,对角,四叶草等更多效果。

2.阴影(box-shadow)

最常见的视觉效果之一,可以使元素变得立体,常用于按钮,input输入框等处。

核心代码:box-shadow: 5px 5px 5px 0 #ccc;

前两个参数设置水平和垂直方向位移,第三个是阴影模糊距离,第四个阴影尺寸,阴影颜色,默认为外阴影,如果需要使用内阴影,则需要在背景颜色后面添加inset参数。

3.变形(transform)

目前transform 属性主要将元素应用2D转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)等变形,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。来提升交互动态效果。

Transform除了能设定变成什么样,还能设定从哪里开始变,也就是变形源点(transform-origin),默认是从元素的最中心点开始的,我们可以通过设定它的值来改变变形源点。

以scale为例,我们可以用以下几种方式来改变元素的大小:

Transform: scale(1.1);----------整体放大1.1倍

Transform: scale(1.1,0.9);------横向放大1.1倍,纵向缩小0.9倍

Transform: scaleX(1.1);------仅横向放大1.1倍,纵向不变

Transform: scaleY(1.1);------横向不变,纵向放大1.1倍

Transform-origin: 0 0;--------以左上角为变形源点

4.过渡(transition)

元素用到变形属性,就不得不提到过渡属性,试想一个DIV旋转45度,如果是在一瞬间发生的,是不是觉得很突兀并毫无美感呢?那如果是在一定的时间区间内平滑地过渡,是不是就是一个类似动画的交互效果呢?

有了Transition,我们从一种效果转换到另一种效果无需JavaScript或者Flash,只需要一段CSS代码而已。

transition 属性是一个简写属性,用于设置四个过渡属性:

1.transition-property-----被改变的属性,如width,opacity,或者直接写all也可以。

2.transition-duration----过渡时间,以秒为单位,规定完成过渡效果需要多少秒

3.transition-timing-function----速度效果的速度曲线

4.transition-delay-----过渡效果何时开始

例如:

transition: width 2s ease-in-out;

相信前端工程师对CSS3的这些特性感到激动。它给网页设计师和开发者更多的力量,并且让许多方面都简化不少。现在,我们只需等待所有浏览器支持它。

CSS3笔记(一)的更多相关文章

  1. css3笔记系列-3.css中的各种选择器详解,不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  2. 【css3笔记】---- 渐变的秘密

    <CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ ...

  3. CSS3 笔记四(Transforms/Transition/Animations)

    CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...

  4. CSS3 笔记三(Shadow/Text/Web Fonts)

    CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...

  5. CSS3 笔记二(Gradients)

    CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial ...

  6. CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

  7. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

  8. CSS3笔记之第四天

    CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...

  9. CSS3笔记之第三天

    CSS浮动 float:right 伪类: a:link {color:#FF0000;}      /* 未访问链接*/ a:visited {color:#00FF00;}  /* 已访问链接 * ...

随机推荐

  1. document 写法

    # UfsProgressBar ## Component InfoA progress bar component of specified progress. ## Usage```<ufs ...

  2. Java并发编程--多线程中的join方法详解

    Java Thread中, join()方法主要是让调用该方法的thread在完成run方法里面的部分后, 再执行join()方法后面的代码 例如:定义一个People类,run方法是输出姓名年龄. ...

  3. 钢管下料问题(钢管用量最少)Lingo求解

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang !钢管下料问题1(钢管用量最少) 题目: 钢管原料   每根19m 客户需求   4m   50根 ...

  4. iOS中使用ZipArchive压缩和解压缩文件-备

    为什么我需要解压缩文件 有许多原因能解释为什么我要在工程中使用压缩和解压缩功能,下面是几个常见的原因: 苹果App Store的50M下载限制 苹 果公司出于流量的考虑,规定在非WIFI环境下,限制用 ...

  5. js深入研究之扩展类,克隆对象,混合类(自定义的extend函数,clone函数,与augment函数)

    1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() ...

  6. C++类静态成员的初始化和用法探讨

    一.一般类型的类的静态变量 1.首先看下面的代码: class CTest1 { public: static int m_num1; void printNum(){cout << m_ ...

  7. ASIHttpRequest:创建队列、下载请求、断点续传、解压缩

    ps:本文转载自网络:http://ryan.easymorse.com/?p=12 感谢作者 工程完整代码下载地址:RequestTestDownload1 可完成: 下载指定链接的zip压缩文件 ...

  8. HDU2206 IP的计算 【经典题】

    IP的计算 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  9. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  10. 软件project(五)——可行性研究

    一.目的 用最小的代价高效率的确定问题是否可以解决. 不是去解决这个问题,而是确定问题是否值得去解决.进行可行性研究简化了系统分析和系统设计的过程. 二.任务 (1)进一步分析问题定义. (2)分析员 ...