经常使用的css3的新属性

       做为前端开发人员，若是你还不知道或尚未接触过CSS3，那么你真的OUT了！就像蒸汽机的发明标志工业革命的开始同样，CSS3和HTML5的出现，将会带来WEB前端开发以及互联网的一场重要变革！

         那么如今我就为你们简但的介绍下经常使用的css3里面的新属性：

一.选择器：

        css选择器，css的选择器多样且灵活，但你要是想让设计师更方便的维护样式表。就要合理的运用他们。三个新的属性选择器添加到出生css3中。

• 匹配包含以特定的值开头的属性的元素

• [att$="value"]
  匹配包含以特定的值结尾的属性的元素

• [att*="value"]
  匹配包含含有特定的值的属性的元素

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE八、Opera、Webkit核心和Gecko核心的浏览器都支持。因此在你的样式中使用属性选择器是比较安全的。

2.伪类:

• :nth-child(n)
  让你基于元素在父节点的子元素的列表位置来指定元素。你能够是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。你能够简单的这样使用：

:nth-child(2n){background-color：#cf9}/*匹配2的倍数的子元素*/

• :last-child
  匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1

浏览器支持: Webkit核心和Opera 浏览器支持全部新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled，可是Firefox 3.5 将更加普遍的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

3.伪元素

    在CSS3中惟一引入的伪元素是::selection.它可让你指定被用户高亮（选中）的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

2、RGBA和透明度

    RGBA 让你能够不只仅设定色彩，还能设定元素的透明。一些浏览器尚不支持它，因此最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。

    #networks li a:focus {   
    background: rgba(164, 173, 183, .15);   
    }

浏览器支持: RGBA 被Webkit内核浏览器支持。IE全部版本都不支持。Firefox 2也不支持，可是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的浏览器支持。IE全部版本一样不支持。IE只支持自家的该死的滤镜（filter）。

3、多背景图

    CSS3 容许你使用多个属性好比background-image、background-repeat, background-size, background-position, background-originand background-clip等在一个元素上添加多层背景图片。如：

   div {   
    background: url(example.jpg) top left no-repeat,   
        url(example2.jpg) bottom left no-repeat,   
        url(example3.jpg) center center repeat-y;   
    } 

浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效

4、文字阴影 

    尽管在CSS2中就已经存在，text-shadow是一个未被普遍应用的CSS属性。可是它将在CSS3中被普遍采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。

尽管这样，你须要确认，你的设计中的文字是可读的，以防用户的浏览器不支持CSS3高级属性。给文字和背景色彩足够的对比度以防text-shadow 属性不能被浏览器正确渲染或理解。

浏览器支持: Webkit核心浏览器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它，Firefox 将在即将发行的3.5版本中支持。

5、@font-face属性

   尽管是最被期待的CSS3 特性 (甚至它在CSS2中就已经被引入了)， @font-face在网站上仍然没有像其它CSS3属性那样被普遍采用.这主要由于字体受权和版权问题：嵌入的字体很容易从网站上下载到，这是字体厂商的主要顾虑。

浏览器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持EOT 字体。 Opera 10 和Firefox 3.5 将会支持它。

6、圆角（边框半径）

    Border-radius 无需背景图片就能给HTML元素添加圆角。如今，它多是使用最多的CSS3属性了，很简单的缘由是使用圆角比较好并且不会对设计和可用性有冲突。

浏览器支持： border-radius只有全部版本的IE浏览器和Opera不支持，Webkit和Gecko核心的浏览器都支持。

7、边框图片 

    border-image 属性容许你在元素的边框上设定图片， 让你从一般的solid, dotted 和其它边框样式中解放出来。该属性给设计师一个更好的工具，用它能够方便的定义设计元素的边框样式，比background-image 属性(对高级设计来讲) 或枯燥的默认边框样式更好用。咱们也能够明确的定义一个边框能够被如何缩放或平铺。

浏览器支持: border-image 目前只有Webkit核心浏览器支持。

8、盒阴影

    box-shadow 属性能够对HTML元素添加阴影 而不用额外的标签或背景图片。相似text-shadow 属性，它加强设计的细节；并且由于它不影响内容的可读性，随意他能够是增长那种额外感受/效果的一种很好的方法。如：

   #navigation {   
    -webkit-box-shadow: 0 0 10px #000;   
    -moz-box-shadow: 0 0 10px #000;   
    }   

浏览器支持: box-shadow目前只有Webkit核心浏览器支持，可是即将发布的Firefox 3.5 也将提供很好的支持。

9、盒子大小

    根据CSS 2.1 规范，在计算盒子的总大小的时候，元素的边框和padding应该被加入到宽度和高度之中的。可是众所周知，旧的浏览器却以它们本身的很是有“创意”的方式来解释这个规范。box-sizing属性容许你指定浏览器如何计算一个元素的宽度和高度。

浏览器支持：box-sizing 被IE八、Opera、Gecko核心和Webkit核心浏览器支持。

10、媒体查询

   媒体查询（media queries）可让你为不一样的设备基于它们的能力定义不一样的样式。好比，在可视区域小于480像素的时候，你可能想让网站的侧栏显示在主内容的下边，这样它就不该该浮动并显示在右侧了： 

   #sidebar {   
    float: right;   
    display: inline; /* IE Double-Margin Bugfix */  
    }   
  
@media all and (max-width:480px) {   
    #sidebar {   
        float: none;   
        clear: both;   
        }   
    }

浏览器支持： 媒体查询被基于webkit核心的浏览器和Opera支持。Firefox将在3.5版本中支持它。IE目前不支持这些属性并且在未来的版本中，也没有支持的计划。

11、语音

   CSS3的语音模块CSS3可让你为屏幕阅读者指定语音样式。你能够控制语音的不一样设置，好比:

• voice-volume
  使用从0到100的数字(0 即静音)、百分数或关键词(silent,x-soft,soft,medium,loud 和x-loud等)来设置音量。

• voice-balance
  控制来自哪一个声道(若是用户的音箱系统支持立体声)。

• Speak
  指示屏幕阅读器阅读相关的文字、数字或标点符号。可用的关键词为none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit.

• Pauses and rests
  在一个元素的被读完以前或以后设定暂停或中止。你可使用时间单位(好比, “2s” 表示2 秒钟) 或关键词(none,x-weak, weak, medium, strong 和x-strong)。

• Cues
  使用声音限制特定元素并控制器音量。

• voice-family
  设定特定的声音类型和声音合成(就像font-family)。

• voice-rate
  控制阅读的速度。能够设置为百分数或关键词: x-slow, slow,medium, fast 和x-fast.

• voice-stress
  指示应该使用的任何重音(强语气)，使用不一样的关键词: none, moderate,strong 和 reduced.

浏览器支持: 如今，只有Opera 浏览器（Windows XP and 2000）支持语音模块的部分属性。为了使用它们，须要使用-xv- 前缀，好比-xv-voice-balance: right。