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