CSS 3.0新增属性

CSS 3.0新增属性

 

CSS 3.0新增属性（Background）

1.background-origin ： border | padding | content

取值：

border:从border区域开始显示背景。

padding:从padding区域开始显示背景。

content:从content区域开始显示背景。

说明：

用来决定 background-position 计算的参考位置。

支持此属性的引擎类型：Gecko（-moz-background-origin），Webkit（-webkit-background-origin），Presto（-o-background-origin）。

兼容性：

支持此属性的各浏览器及其版本：Firefox 3.0(3.5)，Chrome 1.0.x(2.0.x)，Opera 9.63，Safari 3.1(4)。

2.background-clip:border-box | padding-box | content-box | no-clip

取值：

border-box:从border区域向外裁剪背景。

padding-box:从padding区域向外裁剪背景。

content-box:从content区域向外裁剪背景。

no-clip:从border区域向外裁剪背景。

说明：

用来确定背景的裁剪区域。

支持此属性的引擎类型：Gecko（-moz-background-clip），Webkit（-webkit-background-clip），Presto（-o-background-clip）。

兼容性：

支持此属性的各浏览器及其版本：Firefox 3.0.10(3.5)，Chrome 2.0.x，Opera 9.64，Safari 4。

3.background-size:[ <length> | <percentage> | auto ]{1,2} | cover | contain

取值：

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。

<percentage>:取值为0%到100%之间的值。不可为负值。

说明：

设置背景图片的大小。

指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

支持此属性的引擎类型：Webkit（-webkit-background-size），Presto（-o-background-size）。

兼容性：

支持此属性的各浏览器及其版本：Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4）。

4.Multiple Backgrounds

background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

取值：

<background-image>:指定或检索对象的背景图像。

<background-origin>:指定背景的显示区域。

<background-clip>:指定背景的裁剪区域。

<background-repeat>:设置或检索对象的背景图像是否及如何重复铺排。

<background-size>:指定背景图片的大小。

<background-position>:设置或检索对象的背景图像位置。

说明：

多重背景图象，可以把不同背景图象只放到一个块元素里。

多个图片url之间使用逗号隔开即可；如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

CSS3中在容器的多层背景，各子属性与逗号来分隔值。

兼容性：

支持此属性的各浏览器及其版本：Chrome 1.0.x（2.0.x），Safari 3.1（4）。

CSS 3.0新增属性（attribute selectors）

1.子串匹配的属性选择符

1.1 E[att^="val"] ：{attribute} 匹配具有att属性、且值以val开头的E元素。

1.2 E[att$="val"] ：{attribute} 匹配具有att属性、且值以val结尾的E元素。

1.3 E[att*="val"] ：{attribute} 匹配具有att属性、且值中含有val的E元素。

兼容性：

支持此属性的浏览器及其版本：IE 7（8），Firefox 2.0(3.0、3.5)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4）。

2.结构性伪类 E:root

匹配文档的根元素。在HTML中，根元素永远是HTML。

兼容性：

支持此属性的浏览器及其版本：Firefox 2.0(3.0、3.5)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4Public beta）。

2.1 E:nth-child(n) ：{attribute} 匹配父元素中的第n个子元素E ；

2.2 E:nth-last-child(n) ：{attribute} 匹配父元素中的倒数第n个结构子元素E ；

2.3 E:nth-of-type(n) ：{attribute} 匹配同类型中的第n个同级兄弟元素E ；

2.4 E:nth-last-of-type(n) ：{attribute} 匹配同类型中的倒数第n个同级兄弟元素E ；

2.5 E:last-child ：{attribute} 匹配父元素中最后一个E元素 ；

2.6 E:first-of-type ：{attribute} 匹配同级兄弟元素中的第一个E元素；

2.7 E:only-child ：{attribute} 匹配属于父元素中唯一子元素的E ；

2.8 E:only-of-type ：{attribute} 匹配属于同类型中唯一兄弟元素的E ；

2.9 E:empty ：{attribute} 匹配没有任何子元素（包括text节点）的元素E 。

兼容性：

支持此属性的浏览器及其版本：Firefox 3.5，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4Public beta）。

4.UI元素状态伪类

E:checked ：{attribute} 匹配所有用户界面（form表单）中处于选中状态的元素E ；

E:enabled ：{attribute} 匹配所有用户界面（form表单）中处于可用状态的E元素 ；

E:disabled ：{attribute} 匹配所有用户界面（form表单）中处于不可用状态的E元素 ；

E::selection ：{attribute} 匹配E元素中被用户选中或处于高亮状态的部分。

兼容性：

支持此属性的浏览器及其版本：Firefox 2.0(3.0)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4Public beta）。

5. 否定伪类 E:not(s)

E:not(s) ：{attribute} 匹配所有不匹配简单选择符s的元素E 。

兼容性：

支持此属性的浏览器及其版本：Firefox 3.0，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4Public beta）。

6.目标伪类 E:target

E:target ：{attribute}  匹配相关URL指向的E元素 。

兼容性：

支持此属性的浏览器及其版本：Firefox 2.0(3.0)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4Public beta）。

7.通用兄弟元素选择器 E ~ F

E ~ F ：{attribute} 匹配E元素之后的F元素 。

兼容性：

支持此属性的浏览器及其版本：IE 7（8），Firefox 2.0(3.0)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4Public beta）。

CSS 3.0新增属性（Generated Content）

content ： normal | string | attr() | uri() | counter()

取值：

normal：默认值。

string：插入文本内容。

attr()：插入元素的属性值。

uri()：插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）。

counter()：计数器，用于插入排序标识。

说明：

content用于插入生成内容；

content属性与 :before 及 :after 伪元素配合使用，将生成内容放在一个元素内容的前面或后面。

兼容性：

支持此属性的各浏览器及其版本：IE 8，Firefox 3.0(3.5)，Safari 3.1(4)。

CSS 3.0新增属性（Basic box model）

overflow ： visible | auto | hidden | scroll

取值：

visible:不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。

auto:此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden:不显示超过对象尺寸的内容

scroll:总是显示滚动条。

相关属性：overflow-x（横向），overflow-y（纵向）。

CSS 3.0新增属性（User-interface）

1.box-sizing ： content-box | border-box | inherit

取值：

content-box:此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}

border-box:此值改变css2.1盒模型组成模式，content|border|padding {element width=content}

说明：

改变容器的盒模型组成方式。

支持此属性的引擎类型：Gecko(-moz-box-sizing)，Webkit(-webkit-box-sizing)，Presto(-o-box-sizing/box-sizing)，Internet Explore(-ms-box-sizing)。

兼容性：

支持此属性的浏览器及其版本：IE8，Firefox 2.0(3.0、3.5)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4）。

2.resize none | both | horizontal | vertical | inherit

取值：

none:UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。

both:UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。

horizontal:UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度。

vertical:UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度。

inherit:默认继承。

说明：

使元素的区域可缩放，调节元素尺寸大小。适用于任意获得"overflow"条件的容器。

兼容性：

支持此属性的各浏览器及其版本：Chrome 1.0.x（2.0.x），Safari 3.1（4）。

注：Safari、Chrome允许元素的缩放的,但尚未完全支持，目前只允许双向调整。CSS3允许你将这个属性应用到任意元素，这将使缩放这个功能拥有跨浏览器的支持。

3.outline ：[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit

取值：

<outline-color>:指定轮廓边框颜色。

<outline-style>:指定轮廓边框轮廓。

<outline-width>:指定轮廓边框宽度。

<outline-offset>:指定轮廓边框偏移位置的数值。

inherit:默认。

说明：

outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框边缘的外围偏移，可起到突出元素的作用。轮廓线不会占据空间，也不一定是矩形。

兼容性：

支持此属性的浏览器及其版本：IE8，Firefox 3.0.10(3.5)，Chrome 2.0.x，Opera 9.64，Safari 4。

3.1 outline-width：thin | medium | thick | <length>

取值：

thin:定义细轮廓。

medium:默认。定义中等的轮廓。

thick:定义粗的轮廓。

<length>:定义轮廓粗细的值。

说明：

outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。

3.2 outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset

取值：

none:默认值。定义无轮廓。

dotted:定义一个点状的轮廓。

dashed:定义一个虚线轮廓。

solid:定义一个实线轮廓。

double:定义一个双线轮廓。双线的宽度等同于outline-width的值。

groove:定义一个3D凹槽轮廓。此效果取决于outline-color的值。

ridge:定义一个3D凸槽轮廓。此效果取决于outline-color的值。

inset:定义一个3D凹槽轮廓。此效果取决于outline-color的值。

outset:定义一个3D凸槽轮廓。此效果取决于outline-color的值。

4.nav-index ： auto | <number> | inherit

取值：

auto:User Agent默认的顺序。

<number>:该数字（必须是正整数）指定了元素的导航顺序。'1'意味着最先被导航。当若干个元素的nav-index值相同时，则按照文档的先后顺序进行导航。

inherit:默认继承。

说明：

1、该元素支持nav-index属性，而被赋予正整数属性值的元素将会被优先导航。user agent将按照nav-index属性值从小到大进行导航。属性值无须按次序，也无须以特定的值开始。拥有同一nav-index属性值的元素将以它们在字符流中出现的顺序进行导航。

2、对那些不支持nav-index属性或者nav-index属性值为auto的元素将以它们在字符流中出现的顺序进行导航。

3、对那些禁用的元素，将不参与导航的排序。

用户实际上使用的开始导航和激活页面元素的快捷键依赖于user agent的设置（如，通常"tab"键用于按顺序导航，而"enter"键则用于激活选中的元素）。

user agent通常也定义了反向顺序导航的快捷键。当通过"tab"键导航到序列的结束（开始）时，user agent可能会循环到导航序列的开始（结束）。按键组合"shift-tab"通常用于反向序列导航。

兼容性：

支持此属性的浏览器及其版本：IE 6（7、8），Firefox 3.0(3.5)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4）。

补充属性：

nav-up , nav-right , nav-down , nav-left ：auto | <id> [ current | root | <target-name> ]? | inherit

取值：

auto:User Agent默认的顺序。

id:要切换元素的id命名。

root | <target-name>：这个参数不能以”_”命名，指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被视为当前页面的焦点，意味着完全依赖框架页。该属性是以关键节点" root " 标示，User agent将把整个frameset框架页定为目标。

inherit:默认继承。

CSS 3.0新增属性（Text）

1.text-shadow none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

取值：

<color>:指定颜色。

<length>:由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0。

说明：

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow 。

例：text-shadow:5px 2px 6px #000;偏离水平方向5px,垂直方向2px，模糊效果作用距离为6px。（以左上角为原点）

兼容性：

支持此属性的各浏览器及其版本：Firefox 3.5，Chrome 2.0.x，Opera 9.64，Safari 4。

2.text-overflow ： clip | ellipsis

取值：

<clip>:不显示省略标记（...），而是简单的裁切。

<ellipsis>:当对象内文本溢出时显示省略标记（...）

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

兼容性：

支持“clip”属性的各浏览器及其版本：IE 6（7、8），Firefox 2.0(3.0、3.5)，Chrome 1.0.x（2.0.x），Opera 9.63，Safari 3.1（4）。

支持“ellipsis”属性的各浏览器及其版本：IE 6（7、8），Chrome 1.0.x（2.0.x），Safari 3.1（4）。

3.word-wrap  normal | break-word

取值：

<normal>:控制连续文本换行。

<break-word>:内容将在边界内换行。如果需要，词内换行（word-break）也会发生。

说明：

设置或检索当当前行超过指定容器的边界时是否断开转行。

兼容性：

支持此属性的各浏览器及其版本：IE 6（7、8），Firefox 3.5，Chrome 1.0.x（2.0.x），Safari 3.1（4）。

CSS 3.0新增属性（Color）

1.HSL Colors  <length> || <percentage> || <percentage>

hsl(色调(H)，饱和度(S)，亮度(L));

取值：

<length>:Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage>:Saturation(饱和度)。取值为0%到100%之间的值；

<percentage>:Lightness(亮度)。取值为0%到100%之间的值；

说明：

HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

兼容性：

支持此属性的各浏览器及其版本：Firefox 3.0(3.5)，Chrome 2.0.x，Opera 9.64，Safari 4。

2.HSLA colors  <length> || <percentage> || <percentage> || <opacity>

hsla(色调(H)，饱和度(S)，亮度(L),透明度(A));

取值：

<length>:Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage>:Saturation(饱和度)。取值为0%到100%之间的值；

<percentage>:Lightness(亮度)。取值为0%到100%之间的值；

<opacity>:alpha(透明度)。 取值在0到1之间；

说明：

HSLA是在HSL的基础上增加一个透明度(A)的设置。

兼容性：

支持此属性的各浏览器及其版本：Firefox 3.0(3.5)，Chrome 2.0.x，Opera 9.64，Safari 4。

3.opacity  <length> | inherit

取值：

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。默认值为：1

inherit:默认继承。

说明：

由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度，opacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。

兼容性：

支持此属性的各浏览器及其版本：Firefox 3.0.10(3.5)，Chrome 2.0.x，Opera 9.64，Safari 4。

4.RGBA colors 

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：透明度。取值0~1之间

说明：

RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

兼容性：

支持此属性的各浏览器及其版本：Firefox 3.0.10(3.5)，Chrome 2.0.x，Opera 9.64，Safari 4。

CSS 3.0新增属性（border）

1.border-color ： <color>

说明：

设置对象边框的颜色。

如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。

兼容性：

支持的浏览器及其版本有：Firefox 3.0 ，Firefox 3.5。

2.border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

相关属性 ： border-image：border-top-image , border-right-image , border-bottom-image , border-left-image

　　　　　　border-corner-image：border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image

取值：

none:默认值。无背景图。

<image>:使用绝对或相对 url 地址指定背景图像。

<number>:边框宽度用固定像素值表示。

<percentage>:边框宽度用百分比表示。

<stretch>|<repeat>|<round>:拉伸 | 重复 | 平铺 (其中stretch是默认值。)

说明：

使用图片作为对象的边界。

当table设置border-collapse为collapse无效。

引擎类型为Gecko（-moz-border-image），Webkit（-webkit-border-image）的浏览器支持此属性。

兼容性：

支持的浏览器及其版本有：Firefox 3.5,Chrome 1.0.x(2.0.x),Safari 3.1(4)。

3.border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

相关属性：border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

取值：

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。

border-top-left-radius:由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

1.第一个值是水平半径。

2.如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。

3.如果任意一个值为0，则这个角是矩形，不会是圆的。

4.值不允许是负值。

 

兼容性：

支持的浏览器及其版本有：Firefox 3.0（3.5）,Chrome 1.0.x(2.0.x),Safari 3.1。

4.box-shadow：<length> <length> <length> <length> || <color>

取值：<length> <length> <length>? <length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

说明：

设置块阴影

引擎类型：Gecko(-moz-box-shadow)，Webkit(-webkit-box-shadow)。

兼容性：

支持的浏览器及其版本有：Firefox 3.5 ，Chrome 2.0.x,Safari 4。