CSS3新增属性css版

@charset "utf-8";
/* 
-------------------------
此文档收集并介绍CSS3新增属性
------------------------

/*----------border-color---------
设置对象边框的颜色。
---------------------
浏览器支持：Firefox3.0+
---------------------
取值：
：颜色值。
*/
.border-color{
    border: 8px solid #000;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    padding: 5px 5px 5px 15px;
}



/*----------border-image------------
使用图片作为对象的边界。
-----------------------------------
浏览器支持：Firefox3.5+,Chrome,Safari
-----------------------------------
取值：
none：默认值。无背景图。
：使用绝对或相对 url 地址指定背景图像。
：边框宽度用固定像素值表示。
：边框宽度用百分比表示。
[ stretch | repeat | round ]：拉伸 | 重复 | 平铺 (其中stretch是默认值。)
*/
.border-image{
    -webkit-border-image: url(assets/img.png) 0 12 0 12 stretch stretch;
    -moz-border-image: url(assets/img.png) 0 12 0 12 stretch stretch;
    display: block;
    border-width: 0 12px;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    text-decoration: inherit;
    color:white;+color:black;
}



/*-----------border-radius----------
设置对象的圆角边框
-----------------------------------
浏览器支持：Firefox3.0+,Chrome,Safari
-----------------------------------
取值：
第一个值是水平半径。
如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
如果任意一个值为0，则这个角是矩形，不会是圆的。
值不允许是负值。
*/
.border-radius{
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 11px;
    -khtml-border-radius: 22px;
    -webkit-border-radius: 33px;
    border-radius: 44px;
    padding:5px;
}



/*-------------box-shadow----------------
置块阴影
-----------------------------------------
浏览器支持：Firefox3.5+,Chrome2.0+,Safari4+
-----------------------------------------
取值：
   ：
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色。
*/
.box-shadow{
    -webkit-box-shadow:5px 2px 6px #F00;
    -moz-box-shadow:5px 2px 6px #0F0;
    box-shadow:5px 2px 6px #000;
    padding:4px 10px;
}



/*-----------background-origin-------------------
设用来决定 background-position 计算的参考位置。
-------------------------------------------------
浏览器支持：Firefox3.0+,Chrome,Safari3.1+,Opera9.63
-------------------------------------------------
取值：
border：从border区域开始显示背景。
padding：从padding区域开始显示背景。
content：从content区域开始显示背景。
*/
.background-origin{
    width:250px; 
    border:20px dashed #000; 
    padding:20px; 
    text-align:    center; 
    font-weight:bold; 
    color:#000; 
    background:#ccc url(assets/img.jpg) no-repeat; 
    -moz-background-origin:border; 
    -webkit-background-origin:border; 
    -khtml-background-origin:border; 
    background-origin:padding;
}



/*--------------background-clip------------------
用来确定背景的裁剪区域。
-------------------------------------------------
浏览器支持：Firefox3.0.10+,Chrome2.0+,Safari4+,Opera9.64
-------------------------------------------------
取值：
border-box：从border区域向外裁剪背景。
padding-box：从padding区域向外裁剪背景。
content-box：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。
*/
.background-clip{
    border: 20px dotted rgb(102, 102, 102); 
    padding: 20px; 
    background: rgb(204, 204, 204) url(assets/img.jpg) no-repeat scroll 0% 0%; 
    width: 300px; 
    text-align: center; 
    font-weight: bold; 
    color: rgb(0, 0, 0); 
    -moz-background-inline-policy: -moz-initial; 
    -moz-background-clip: padding; 
    -moz-background-origin: padding;
}



/*----------background-size----------------------
设置背景图片的大小。
-------------------------------------------------
浏览器支持：Chrome1.0+,Safari3.1+,Opera9.63
-------------------------------------------------
取值：
：由浮点数字和单位标识符组成的长度值。不可为负值。
：取值为0%到100%之间的值。不可为负值。
*/
.background-size{
    border: 1px solid #CCCCCC; 
    padding:90px 5px 10px; 
    background:url(assets/img.jpg) no-repeat ; 
    -webkit-background-size: 100% 80px; 
    -o-background-size: 100% 80px; 
    background-size: 100% 80px; 
}



/*-----------------multiple-backgrounds-----------------------
多重背景图象，可以把不同背景图象只放到一个块元素里。
多个图片url之间使用逗号隔开即可；如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
------------------------------------------
浏览器支持：Chrome1.0+,Safari3.1+
*/
.multiple-backgrounds{
    background-image: url(assets/img.png), url(assets/img.jpg);
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;
    padding:20px;
    height:500px;
}



/*----------hsl-colors,hsla-colors--------
HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
----------------------------------------------------
浏览器支持：Firefox3.0+,Chrome2.0+,Safari4+,Opera9.64
----------------------------------------------------
取值：
 ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
 ：Saturation(饱和度)。 取值为0%到100%之间的值；
 ：Lightness(亮度)。 取值为0%到100%之间的值；
*/
.hsl-colors{
    background-color: hsl(240,100%,50%);
    color:white;
}

/*
同上，多一个alpha(透明度)
*/
.hsla-colors{
    background-color: hsla(0,100%,50%,0.2);
}



/*----------------opacity---------------------
由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度，opacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。
----------------------------------------------------
浏览器支持：Firefox3.0+,Chrome2.0+,Safari4+,Opera9.64
----------------------------------------------------
取值：
 ：由浮点数字和单位标识符组成的长度值。不可为负值。默认值为：1
*/
.opacity{
    opacity:0.50;
}



/*-------------------rgba-colors------------------
RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。
----------------------------------------------------
浏览器支持：Firefox3.0.10+,Chrome2.0+,Safari4+,Opera9.64
----------------------------------------------------
取值：
 ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
 ：Saturation(饱和度)。 取值为0%到100%之间的值；
 ：Lightness(亮度)。 取值为0%到100%之间的值；
 ：alpha(透明度)。 取值在0到1之间；
*/
.rgba-colors{
    background-color: rgba(0,0,0,0.5);
}



/*------------------text-shadow-------------------
设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow
----------------------------------------------------
浏览器支持：Firefox3.5+,Chrome2.0+,Safari4+,Opera9.64
----------------------------------------------------
取值：
 ：指定颜色。
 ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
 ：由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。
*/
.text-shadow{
    text-shadow:5px 2px 6px #000;"
}



/*----------------------test_clip,test_ellipsis----------------------------
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
----------------------------------------------------
浏览器支持：
clip:IE6+,Firefox2.0+,Chrome1.0+,Safari3.1+,Opera9.63
ellipsis:IE6+,Chrome1.0+,Safari3.1+
----------------------------------------------------
取值：
 ：指定颜色。
 ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
 ：由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。
*/
.test_clip{
    text-overflow:clip; 
    overflow:hidden;
     white-space:nowrap; 
     width:200px; 
     background:#ccc;
}
.test_ellipsis{
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    width:200px; 
    background:#ccc;
}



/*----------------------word-wrap----------------------------
设置或检索当当前行超过指定容器的边界时是否断开转行。
----------------------------------------------------
浏览器支持：IE6+,Firefox3.5+,Chrome1.0+,Safari3.1+
----------------------------------------------------
取值：
normal：控制连续文本换行。
break-word：内容将在边界内换行。如果需要，词内换行（word-break）也会发生。
*/
.word-wrap{
    width:300px;
    word-wrap:break-word;
    border:1px solid #999999;
}



/*-----------------------box-sizing---------------------------
改变容器的盒模型组成方式。
----------------------------------------------------
浏览器支持：IE8+,Firefox2.0+,Chrome1.0+,Safari3.1+,Opera9.63
----------------------------------------------------
取值：
content-box:此值维持css2.1盒模型的组成模式，border|padding|content {element border|padding {element overflow"条件的容器。
----------------------------------------------------
浏览器支持：Chrome1.0+,Safari3.1+
----------------------------------------------------
取值：
none：UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
both：UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。
horizontal：UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度。
vertical：UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度。
inherit：默认继承。
*/
.resize{
    width:300px;
    height:80px;
    padding:16px;
    border:1px solid;
    resize:both;
    overflow:auto;
}



/*------------------------outline--------------------------
outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框边缘的外围偏移，可起到突出元素的作用。
outline 属性可设置元素周围的轮廓线。
轮廓线不会占据空间，也不一定是矩形。
outline 属性是一个简写属性，用于设置元素周围的轮廓线。
----------------------------------------------------
浏览器支持：IE8+,Firefox 3.0.10+,Chrome2.0+,Safari4,Opera9.64
----------------------------------------------------
取值：
：指定轮廓边框颜色。参见outline-color
：指定轮廓边框轮廓。参见outline-style
：指定轮廓边框宽度。参见outline-width
：指定轮廓边框偏移位置的数值。参见outline-offset
inherit：默认。
*/
.outline{
    width: 160px;
    padding: 10px;
    height: 30px;
    border: 2px solid black;
    outline-color:#897048;
    outline-style:groove;
    outline-width:2px;
    outline-offset: 5px;
}




/*-------------------nav-up,nav-right,nav-down,nav-left-------------------------------
输入设备默认四个方向键按html文档顺序顺序来控制元素的焦点切换，但为了更好的用户体验，User agents提供了自定义切换焦点的控制顺序方向。
----------------------------------------------------
浏览器支持：IE6+,Firefox 3.0+,Chrome1.0+,Safari3.1+,Opera9.63
----------------------------------------------------
取值：
auto：User Agent默认的顺序。
 ：要切换元素的id命名。
root | ：这个参数不能以”_”命名，指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被视为当前页面的焦点，意味着完全依赖框架页。该属性是以关键节点" root " 标示，User agent将把整个frameset框架页定为目标。
inherit：默认继承。
*/
.nav{
    nav-index:1;
    nav-right:#b2; 
    nav-left:#b4;
    nav-down:#b2; 
    nav-up:#b4;
}



/*----------------------overflow-x,overflow-y----------------------------
检索或设置当对象的内容超过其指定宽度时如何管理内容。
----------------------------------------------------
浏览器支持：IE6+,Firefox 3.0+,Chrome1.0+,Safari3.1+,Opera9.63
----------------------------------------------------
取值：
visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden：不显示超过对象尺寸的内容
scroll：横向显示滚动条
*/
.overflow{
    overflow-x: scroll; 
    overflow-y: auto;
    height: 120px; 
    width: 120px; 
    background:#CCCCCC;
}


/*------------------------content--------------------------
content用于插入生成内容；
content属性与 :before 及 :after 伪元素配合使用，将生成内容放在一个元素内容的前面或后面。
----------------------------------------------------
浏览器支持：IE8+,Firefox 3.0+,Safari3.1+
----------------------------------------------------
取值：
normal：默认值。
string：插入文本内容。
attr()：插入元素的属性值。
uri()：插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）。
counter()：计数器，用于插入排序标识。
*/
.example_content{
     width:400px;
     height:50px;
     line-height:50px;
     overflow:hidden; 
     text-align:center; 
     color:#FF0000; 
     border:#993300 solid 1px; 
}
#example_content_1:before { 
    content:"您使用的浏览器支持content属性"; 
}



/*------------------------media queries--------------------------
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.
media_query: [only | not]?  [ and  ]*
expression: (  [: ]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width 
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome 
  | resolution | min-resolution | max-resolution
  | scan | grid
----------------------------------------------------
浏览器支持：Firefox 3.5+,Safari3.1+,Chrome1.0+,Opera 9.63
----------------------------------------------------
取值：
：指定设备名称。请参阅附录：设备类型
{sRules}：样式表定义。
*/
.example_media{
    background-color: #0f0;
    }

@media all and (min-width: 300px) {
    .example_media {
        background-color: #cff;
    }
}
@media screen and (max-width: 600px) {
    .example_media {
        background-color: #c00;
    }
    
/*------------------------@font-face------------------------------
@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】
------------------------------------------------------------------
浏览器支持：
.eot格式：IE
.ttf格式：Firefox 3.5+,Opera 10+,Safari 3.2.1+
------------------------------------------------------------
取值：
font-family：设置文本的字体名称。
font-style：设置文本样式。
font-variant：设置文本是否大小写。
font-weight：设置文本的粗细。
font-stretch：设置文本是否横向的拉伸变形。
font-size：设置文本字体大小。
src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
*/

@font-face {
     font-family: Kingston;
     src:url(assets/Alpida Unicode System.eot);
}
.example_font { 
    FONT-SIZE: 45pt; 
    FONT-FAMILY: "Kingston" 
}



/*-----------------------------------------------------------------------
子串匹配的属性选择器，具体规则与正则中的匹配相似。
-------------------------------------------------------------------------
选择符类型            表达式                    描述
子串匹配的属性选择符    E[att^="val"]            匹配具有att属性、且值以val开头的E元素
子串匹配的属性选择符    E[att$="val"]            匹配具有att属性、且值以val结尾的E元素
子串匹配的属性选择符    E[att*="val"]            匹配具有att属性、且值中含有val的E元素
结构性伪类            E:root                    匹配文档的根元素。在HTML中，根元素永远是HTML
结构性伪类            E:nth-child(n)            匹配父元素中的第n个子元素E
结构性伪类            E:nth-last-child(n)        匹配父元素中的倒数第n个结构子元素E
结构性伪类            E:nth-of-type(n)        匹配同类型中的第n个同级兄弟元素E
结构性伪类            E:nth-last-of-type(n)    匹配同类型中的倒数第n个同级兄弟元素E
结构性伪类            E:last-child            匹配父元素中最后一个E元素
结构性伪类            E:first-of-type            匹配同级兄弟元素中的第一个E元素
结构性伪类            E:only-child            匹配属于父元素中唯一子元素的E
结构性伪类            E:only-of-type            匹配属于同类型中唯一兄弟元素的E
结构性伪类            E:empty                    匹配没有任何子元素（包括text节点）的元素E
目标伪类                :target                    匹配相关URL指向的E元素
UI元素状态伪类            E:enabled                匹配所有用户界面（form表单）中处于可用状态的E元素
UI元素状态伪类            E:disabled                匹配所有用户界面（form表单）中处于不可用状态的E元素
UI元素状态伪类            E:checked                匹配所有用户界面（form表单）中处于选中状态的元素E
UI元素状态伪类            E::selection            匹配E元素中被用户选中或处于高亮状态的部分
否定伪类                E:not(s)                匹配所有不匹配简单选择符s的元素E
通用兄弟元素选择器        E ~ F                    匹配E元素之后的F元素
*/

div[title^="a"]{color:#ff0;}
div[title$="b"]{color:#f00;}
div[title*="c"]{color:#00f;}

html:root {background-color:#DCDCDC;}

p:nth-child(2) {color:#FF0000;}
p:nth-last-child(1) {color:#FF0000;}
p:nth-of-type(3) {color:#FF0000;}
p:nth-last-of-type(2) {color:#FF0000;}

p:last-child {color:#FF0000;}
p:first-of-type {color:#FF0000;}
p:only-child {color:#FF0000;}
p:only-of-type {color:#FF0000;}

strong:empty {display:block;width:200px;height:20px;background-color:#EEEEEE;}

div#content-primary:target {background-color:#FF0; font-weight:bold;line-height:24px } 

input:enabled {background-color:#FF0000;}
input:disabled {border:1px solid #FF0000;background-color:#EEEEEE;}
input:checked {margin:0 50px;}

p::selection {background-color:#00FF00;}

p:not(.bg) {background-color:#00FF00;}

div ~ p {background-color:#00FF00;}