CSS3新增属性css版

@charset "utf-8";/* -------------------------此文档收集并介绍CSS3新增属性------------------------/*----------border-color---------设置对象边框的颜色。---------------------浏览器支持：Firefox3.0+---------------------取值：<color>：颜色值。*/.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：默认值。无背景图。<image>：使用绝对或相对 url 地址指定背景图像。<number>：边框宽度用固定像素值表示。<percentage>：边框宽度用百分比表示。[ 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-----------------------------------取值：<number>第一个值是水平半径。<number>如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一个值为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+-----------------------------------------取值：<length> <length> <length> <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色。*/.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-------------------------------------------------取值：<length>：由浮点数字和单位标识符组成的长度值。不可为负值。<percentage>：取值为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----------------------------------------------------取值：<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；<percentage> ：Saturation(饱和度)。 取值为0%到100%之间的值；<percentage> ：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----------------------------------------------------取值：<length> ：由浮点数字和单位标识符组成的长度值。不可为负值。默认值为：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----------------------------------------------------取值：<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；<percentage> ：Saturation(饱和度)。 取值为0%到100%之间的值；<percentage> ：Lightness(亮度)。 取值为0%到100%之间的值；<opacity> ：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----------------------------------------------------取值：<color> ：指定颜色。<length> ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。<opacity> ：由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 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.63ellipsis:IE6+,Chrome1.0+,Safari3.1+----------------------------------------------------取值：<color> ：指定颜色。<length> ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。<opacity> ：由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 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+,