当前位置:
  1. 魔豆IT网
  2. 系统教程
  3. CSS3
  4. 正文

CSS3中的新特性:颜色、圆角、阴影、渐变效果和等多浏览器支持介绍

这篇文章的目标读者是网页开发人员。本文首先讲诉了CSS3的浏览器前缀,接着将讲述一些基于标准的扩展。在CSS3特性的部分里,将涉及圆角,rgba颜色,阴影,渐变,动画变换,和2D转换等。

前缀

有一些浏览器在CSS3还未标准化之前就已经实现了CSS3的特性。因此,在语法还未被标准规定下来之前,一些CSS3的样式就在那些浏览器中加上了其特定的前缀。例如在firefox和Safari上,渐变的CSS3语法就不相同。Firefox 使用-moz-linear-gradient,而 Safari (WebKit) 则使用-webkitgradient。同理,很多的CSS3语法都被不同的浏览器加上了不同的前缀。

常见的前缀有:

• Chrome: -webkit-

• Safari: -webkit-

• Firefox: -moz-

• IE: -ms-

• Opera: -o-

目前,你应该首先声明带浏览器前缀的样式,然后再声明W3C标准的样式。这是为了保证当未来的浏览器只支持标准化后的CSS3样式时,你的代码仍然能够有效运行。

#prefix-example { -moz-box-shadow: 0 3px 5px #FFF; -webkit-box-shadow: 0 3px 5px #FFF; box-shadow: 0 3px 5px #FFF;}

颜色

CSS3提供了一些新方法来定义颜色,比如增加了alpha透明度的设置。在以前,想实现透明效果通常是平铺一个1px × 1px的背景图片,现在你可以抛弃那种做法了。

新增加的rgb样式可以允许你用数字来定义RGB的值,而不再需要使用16进制了。如果你想自己转化两者的对应值,你可以使用Safari自带的WebInspector工具,在 Styles 面板上点击相应的颜色即可。

下面的代码等同于#FFF,就是白色:

#rgb-example { // rgb(red, green, blue); color: rgb(255, 255, 255);}

你也可以使用新增的hsl 样式。HSL分别代表色度、饱和度、亮度。

色度:代表在颜色盘上的度数,0度表示红色,120度表示绿色,240度表示蓝色。在之间的表示相应的中间色。

饱和度:一个百分比值,100%表示完全显示该颜色。

亮度:也是一个百分比值,0%表示暗(黑色),100%表示亮(白色)。

如果采用rgb或者hsl写法,那么增加alpha透明度非常简单,只需要在后面加上一个0到1之间的小数即可。0表示完全透明,1表示完全不透明。

#alpha-example { background: hsla(324, 100%, 50%, .5); border: 1em solid rgba(0, 0, 0, .3); color: rgba(255, 255, 255, .8);}

浏览器支持:

• Firefox:完全支持

• Chrome:完全支持

• Opera:完全支持

• Safari:完全支持

• IE:完全支持

圆角

过去,在CSS2.1的环境下实现圆角效果简直就是一种打击。因为那通常需要额外的HTML代码段,图片甚至JavaScript代码。

现在,事情变得容易多了,你只需要使用border-radius样式。就像padding或者margin的样式定义一样,你可以使用4个radius来定义4个角,或者使用2个radius定义水平的和垂直的角,或者使用1个radius定义所有的角。如果你设置一个足够大的radius,甚至可以将整个容器组成一个圆形。

#rounded-corner{ border-radius: 20px; // horizonal, vertical border-radius: 20px 20px; // top left, top right, bottom right, bottom left border-radius: 20px 20px 20px 20px;}

浏览器支持:

• Firefox:完全支持

• Chrome:完全支持

• Opera:完全支持

• Safari:需要使用-webkit-前缀

• IE: 版本9以上支持

阴影

在CSS3之前,很多开发人员不会理会阴影效果,因为那是一个大麻烦。现在CSS3提供了 box-shadow 样式,可以让你轻松实现阴影效果。但是注意不要过度使用阴影效果,因为那可能带来浏览器渲染的性能问题。

box-shadow可以接受若干选项:垂直方向的偏移,水平方向的偏移,模糊的半径,阴影扩展的距离,以及颜色。如果你还给出inset选项,阴影将向容器内扩展,否者默认情况下,阴影是向容器外扩展的。另外,你也可以对一个容器使用若干个阴影,通过使用逗号隔开他们各自的定义,如同下列代码所示:

#drop-shadows{// horizonal offset, vertical offset, blur radius, colorbox-shadow: 10px 5px 15px #000;// inset shadowsbox-shadow: 10px 5px 15px #000 inset;// horizonal offset, vertical offset, blur radius, spread distance, colorbox-shadow: 10px 5px 15px 15px #000;// multiple shadowsbox-shadow: 0 1px 1px #FFF inset, 5px 5px 10px #000;}

浏览器支持:

• Firefox:完全支持

• Chrome:需要使用-webkit-前缀

• Opera:完全支持

• Safari:需要使用-webkit-前缀

• IE: 版本9以上支持

文字阴影

在CSS3之前,可能唯一实现文字阴影的方法就是使用加工好的图片代替文字——真是一个淫荡的方法。(没错,原文就是这么写的 ==!)

现在,CSS3允许你通过text-shadow样式来增加文字阴影。只需要传入几个参数:垂直偏移、水平偏移、模糊半径(可选参数)、颜色。

#text-shadow{// horizonal offset, vertical offset, colortext-shadow: 1px 1px #FFF;// horizonal offset, vertical offset, blur radius, colortext-shadow: 1px 1px .3em rgba(255, 255, 255, .8);}

文字阴影与容器阴影不同点就是:它不支持阴影扩展半径和向内的阴影。

浏览器支持:

• Firefox:完全支持

• Chrome:完全支持

• Opera:完全支持

• Safari:完全支持

• IE: 不支持

渐变效果

以前,实现渐变效果通常是靠平铺背景图片。背景图片是固定的宽度或者高度,然后靠图像编辑软件制造渐变效果。

CSS3增加了对线性渐变和径向渐变渐变的支持,也被看作最有用的新特性之一。有若干个种CSS方法可以生成渐变,你只需要声明对应的颜色即可。

对于线性渐变,只需要传入颜色列表即可。

linear-gradient(#CCC, #DDD, white) 从CCC变到DDD,再变到FFF

默认情况下,渐变效果是垂直的。但是你可以通过传入位置值来改变它的方向。

// horizontal gradientlinear-gradient(left, #CCC, #DDD, #FFF);// or with a specific anglelinear-gradient(-45deg , #CCC , #FFF)

如果你希望更多地控制渐变效果从哪个位置开始,你可以在颜色旁边使用声明一个百分比或者像素值。

linear-gradient(white , #DDD 20% , black) 在容器高度20%的地方已经变成DDD了

你也可以渐变到透明,或者从透明渐变到不透明:

radial-gradient( rgba(255, 255, 255, .8) , transparent )

Safari目前使用的是不同的语法,在不久的将来它将变得兼容标准写法。但是现在,你需要这样使用:

// -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);-webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(10%, #DDD), to(#CCC) );

尽管主流的浏览器都支持渐变,但是几乎都要其浏览器前缀写法:

• Firefox: with -moz-

• Chrome: with -webkit-

• Safari: alternative implementation

• IE >= 10: with -ms-

• Opera >= 11.1: with -o-

所以,一个支持跨浏览器的渐变效果实现的CSS代码如下:

#gradient-example {/* Fallback */background: #FFF;/* Chrome < 10, Safari < 5.1 */background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/* Chrome >= 10, Safari >= 5.1 */background: -webkit-linear-gradient(#FFF, #CCC);/* Firefox >= 3.6 */background: -moz-linear-gradient(#FFF, #CCC);/* Opera >= 11.1 */background: -o-linear-gradient(#FFF, #CCC);/* IE >= 10 */background: -ms-linear-gradient(#FFF, #CCC);/* The standard */background: linear-gradient(#FFF, #CCC);}

多重背景

就像你可以在CSS3里设置多重阴影一样(逗号隔开),你也可以设置多重背景。

以前,实现多重背景通常需要创建若干嵌套的DOM元素。现在CSS3让你只需使用"逗号隔开"的写法加上若干个背景样式了。这极大地简化了代码量。

#multiple-backgrounds{ background: url(snowflakes.png) top repeat-x, url(chimney.png) bottom no-repeat, -moz-linear-gradient(white, #CCC), #CCC ;}

浏览器支持:

• Firefox:完全支持

• Chrome:完全支持

• Opera:完全支持

• Safari:完全支持

• IE: 版本9以上支持

选择符

CSS3提供了若干新的选择符:

:first-child

选择Collection中的第一个元素

:last-child

选择Collection中的最后一个元素

:only-child

选择只有一个孩子的元素

:target

选择跟URL的hash值对应的元素

:checked

选择被checked状态的check元素

我想要重点讲述的是下面一些选择符:

第N个孩子

:nth-child 选择符让你改变每N个元素的样式。例如,下面的代码将选择每第3个元素:

#example:nth-child( 3n ) { /* ... */ }

下面的代码将选择奇数号元素或者偶数号元素:

/* Even children */#example:nth-child( 2n ) { /* ... */ }#example:nth-child( even ) { /* ... */ }/* Odd children */#example:nth-child( 2n+1 ) { /* ... */ }#example:nth-child( odd ) { /* ... */ }

你也可以使用反向的Nth-child选择符。例如,下面代码将选择最后一个元素:

/* Last child */#example:nth-last-child( 1 )

实际上,:first-child 选择符等同于 :nth-child(1),同理, :last-child等同于:nth-last-child(1)。

直接孩子选择符

你可以使用大于符号>来限制只选择直接孩子元素

/* Only directly descendant divs */#example > div { }

否定选择符

你可以使用:not来否定一个简单的选择符。不过,目前否定选择符并不支持复杂的选择符,例如你不能这样用 p:not(h1 + p)

/* Only directly descendant children, except ones with the "current" class */#example > *:not(.current) {display: none}

浏览器支持:

• Firefox:完全支持

• Chrome:完全支持

• Opera:完全支持

• Safari:完全支持

• IE: 版本9以上支持

变换效果(Transition)

CSS3增加了对transition的支持,使得你可以借由样式变化创造简单的动画效果。你需要做的是传入以下参数:变换持续时间,属性,变换的方式(可选)。你可以使用秒(s)或微秒(ms)作为持续时间参数。

/* duration, property, animation type (optional) */transition: 1.5s opacity ease-out/* Multiple transitions */transition: 2s opacity , .5s height ease-intransition: .5s height , .5s .5s width

有若干种时间点序列(timing sequence)方式可供选择:

• linear

• ease-in

• ease-out

• ease-in-out

或者,你可以自定义一个时间点序列(timing sequence)。时间点序列的目的是控制transition效果在不同时间子段中的速度。

#transition-example {position: absolute;/* cubic-bezier(x1, y1, x2, y2) */transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3);}

在Safari和Chrome中,一旦transition完成,一个名叫WebKitTransitionEvent的事件将在该元素上触发。在Firefox中,这个事件叫做transitionend。不好的地方是,使用CSS3有若干缺点:比如,在变换过程中你不能作过多的控制,以及并不是所有的DOM元素都是可变换的(transitionable)。这就意味着,transition只能被用于简单的动画。另外,一些浏览器(例如 Safari)对transition做了硬件层面上的渲染加速。

#transition-example {width: 50px;height: 50px;background: red;-webkit-transition: 2s background ease-in-out;-moz-transition: 2s background ease-in-out;-o-transition: 2s background ease-in-out;transition: 2s background ease-in-out;}#transition-example:hover {background: blue;}

由于某些原因,如果你想在渐变效果之上做transition,那么必须至少有一个端点具有alpha值。另外,你也不能在某些值之间作transition,比如height:0和 height:auto之间。

浏览器支持:

• Firefox: with -moz-

• Chrome: with -webkit-

• Safari: with -webkit-

• IE >= 10.0: with -ms-

• Opera: with -o-

边框图像

使用border-image 样式,你可以设置一张图片作为DOM元素的边框。第一个参数指出图片的URL,接着一个参数指出需要的图片是怎样从原图片上切割的,最后一个参数指出图片的伸展方式。可选的伸展方式有round(平铺),repeat(重复),和stretch(缩放)。

border-image: url(border.png) 14 14 14 14 round round;border-image: url(border.png) 14 14 14 14 stretch stretch;

浏览器支持:

• Firefox: with -moz-

• Chrome: with -webkit-

• Safari: with -webkit-

• IE:不支持

• Opera: with -o-

Box Sizing(盒模型的大小调整?)

你是否曾经有过这样的想法,使一个元素的宽度为100%,但是它仍然具有padding和margin值? 对于传统的盒模型来说,CSS对于百分比宽度的计算时参考的是父容器的宽度,然后再加上margin和padding。因此,如果一个元素有100%的宽度,再加上padding和margin或者border,它一定会溢出的(overflow)。

现在,通过设置 box-sizing属性的值为 border-box (它的默认值是contetbox),你可以改变盒模型大小计算的方式,让它一并考虑borders、margins、padding,和content。

.border-box {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

该特性目前已被各浏览器广泛支持了,而且它是安全稳定的除非你考虑在IE8之前的版本中使用。

形状变换(Transformations)

拜CSS3所赐,我们可以实现简单的2D形状变换。比如,可以让元素旋转,缩放,倾斜。下面的代码是把一个元素逆时针旋转30度。

transform: rotate( -30deg );

下面的代码是把一个元素沿着X方向和Y方向各自倾斜一定的角度。

transform: skew( 30deg , -10deg );

下面的代码是使用scale表达式把一个元素的大小增加或减少一定的比例。默认情况下,一个元素的scale应该是1.0。

transform: scale(1.2);

注意,你可以通过并排这些transformation函数,从而达到实现多种变换的效果。

transform: rotate(30deg) skewX(30deg);

浏览器支持:

• Firefox: with -moz-

• Chrome: with -webkit-

• Safari: with -webkit-

• IE >= 9: with -ms-

• Opera: with -o-

活动盒模型(Flexible Box Model)

CSS3引进了活动盒模型的概念。这个概念在其他GUI框架上已经存在很久了,比如在Adobe Flex上。活动盒模型有什么用呢?比如,在以前,如果你想让list元素按照水平方向排列,你需要使用元素浮动。现在活动盒模型让你可以完成这个效果。请参照以下的代码。

.hbox {display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-align: stretch;-webkit-box-pack: left;display: -moz-box;-moz-box-orient: horizontal;-moz-box-align: stretch;-moz-box-pack: left;}.vbox {display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-align: stretch;display: -moz-box;-moz-box-orient: vertical;-moz-box-align: stretch;}

首先,我们设置该元素的display属性值为-webkit-box 或者-moz-box。然后,设置direction的值,告诉该元素的子元素将如何排列它们的盒子。默认情况下,所有的子元素会相同地扩展以适应父元素的大小,但是,你可以设置box-flex改变这种行为。

通过设置box-flex为0,就使得子元素不会扩展。如果设置box-flex为1甚至更高的值,那么子元素将扩展以占领其他的空白的空间。例如,可以设置边栏(sidebar)的flex值为0,设置主栏的flex值为1,这样边栏不会扩展,主栏将扩展到占满剩余的空间。

#sidebar {-webkit-box-flex: 0;-moz-box-flex: 0;box-flex: 0;width: 200px;}#content {-webkit-box-flex: 1;-moz-box-flex: 1;box-flex: 1;}

浏览器支持:

• Firefox: with -moz-

• Chrome: with -webkit-

• Safari: with -webkit-

• IE >= 10: with -ms-

• Opera:不支持

自定义字体

@font-face 样式可以让你在网页中使用自定义字体。这样,该网页的显示就可以不再依赖于用户电脑中已安装的字体了。目前支持字体类型为TrueType或者OpenType的字体。字体文件必须放在跟该网页相同的域名上。

使用@font-face时首先要给出该字体的font-family,然后给出指向字体文件的地址。

@font-face {font-family: "Bitstream Vera Serif Bold";src: url("/fonts/VeraSeBd.ttf");}

接着在网页中的任何地方使用该字体了。font-family的值跟上面的font-family值对应。

#font-example {font-family: "Bitstream Vera Serif Bold";}

字体将以异步下载的方式下载到用户浏览器中,并且在下载完成后作用与网页上。在下载还未完成的时间里,那些字体会暂时以浏览器默认字体显示。因此,如果考虑用户体验,可以先指定一个其他已安装的可选字体来替换浏览器的默认字体。

浏览器支持:

• Firefox: full support

• Chrome: full support

• Safari: full support

• IE >= 9: full support

• Opera: full support

相关阅读

《CSS3中的新特性:颜色、圆角、阴影、渐变效果和等多浏览器支持介绍》由网友“宠着我”推荐。

转载请注明:http://www.modouwifi.com/jiaocheng/0520114TH021.html