CSS3笔记（一）

最开始的时候 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的这些特性感到激动。它给网页设计师和开发者更多的力量，并且让许多方面都简化不少。现在，我们只需等待所有浏览器支持它。