常用的css3的新属性-白红宇

常用的css3的新属性

阅读量：6501 次

发布时间：2019-06-24

本文共 4022 字，大约阅读时间需要 13 分钟。

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

那么现在我就为大家简但的介绍下常用的css3里面的新属性：

一.选择器：

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

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

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

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

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、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 均支持。

二、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）。

三、多背景图

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中有效

四、文字阴影

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

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

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

五、@font-face属性

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

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

六、圆角（边框半径）

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

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

七、边框图片

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

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

八、盒阴影

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 也将提供很好的支持。

九、盒子大小

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

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

十、媒体查询

媒体查询（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目前不支持这些属性而且在将来的版本中，也没有支持的计划。

十一、语音

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