CSS3 box-reflect 属性颜色渐变.docxVIP

CSS3 box-reflect 属性语法：box-reflect：none |?direction?offset??mask-box-image?direction?= above | below | left | rightoffset?=?length?|?percentagemask-box-image?= none |?url?|?linear-gradient?|?radial-gradient?|?repeating-linear-gradient?|repeating-radial-gradient默认值：none取值：none：无倒影directionabove：指定倒影在对象的上边below：指定倒影在对象的下边left：指定倒影在对象的左边right：指定倒影在对象的右边offsetlength：用长度值来定义倒影与对象之间的间隔。可以为负值percentage：用百分比来定义倒影与对象之间的间隔。可以为负值mask-box-imagenone：无遮罩图像url：使用绝对或相对地址指定遮罩图像。linear-gradient：使用线性渐变创建遮罩图像。radial-gradient：使用径向(放射性)渐变创建遮罩图像。repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。CSS3 图像取值 linear-gradient()语法：linear-gradient：linear-gradient([?point,]??color-stop[,?color-stop]+);point：[ left | right ]? [ top | bottom ]? ||?angle?color-stop：color?[?length?|?percentage?]?取值：pointleft：设置左边为渐变起点的横坐标值。right：设置右边为渐变起点的横坐标值。top：设置顶部为渐变起点的纵坐标值。bottom：设置底部为渐变起点的纵坐标值。angle：用角度值指定渐变的方向（或角度）。color-stop：指定渐变的起止颜色。color-stopcolor：指定颜色。请参阅颜色值length：用长度值指定起止色位置。不允许负值percentage：用百分比指定起止色位置。说明：用线性渐变创建图像。写本文档时Firefox,Chrome,Opera已经在实验性质阶段支持了该属性，Safari对该属性的支持仍停留在以私有方式实现的阶段（可参阅页面底部的示例代码）。Firefox还支持使用percentage、length和center特殊值定义渐变起点，并支持起点与角度一起使用。Example:!DOCTYPE htmlhtml lang=zh-cnheadmeta charset=utf-8 /titlelinear-gradient()_CSS参考手册_web前端开发参考手册系列/titlestylediv{width:200px;height:100px;margin-top:10px;border:1px solid #ddd;}.test{background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#333));background:-webkit-linear-gradient(#fff,#333);background:-o-linear-gradient(#fff,#333);background:-ms-linear-gradient(#fff,#333);background:linear-gradient(#fff,#333);}.test2{background:-moz-linear-gradient(#000,#f00 50%,#090);background:-webkit-gradient(linear,centertop,center bottom,from(#000),color-stop(.5,#f00),to(#090));background:-webkit-linear-gradient(#000,#f00 50%,#090);background:-o-linear-gradient(#000,#f00 50%,#090);background:-ms-linear-gradient(#000,#f00 50%,#090);background:linear-gradient(#000,