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

CSS3 box-reflect 属性语法：box-reflect：none |?= above | below | left | right=|= none |默认值：none取值：none：无倒影above：指定倒影在对象的上边below：指定倒影在对象的下边left：指定倒影在对象的左边right：指定倒影在对象的右边：用长度值来定义倒影与对象之间的间隔。可以为负值：用百分比来定义倒影与对象之间的间隔。可以为负值none：无遮罩图像：使用绝对或相对地址指定遮罩图像。：使用线性渐变创建遮罩图像。：使用径向(放射性)渐变创建遮罩图像。：使用重复的线性渐变创建背遮罩像。：使用重复的径向(放射性)渐变创建遮罩图像。CSS3 图像取值 linear-gradient()语法：linear-gradient(,?,+);： left | right ? top | bottom ? |?：|?取值：left：设置左边为渐变起点的横坐标值。right：设置右边为渐变起点的横坐标值。top：设置顶部为渐变起点的纵坐标值。bottom：设置底部为渐变起点的纵坐标值。：用角度值指定渐变的方向（或角度）。：指定渐变的起止颜色。：指定颜色。请参阅颜色值：用长度值指定起止色位置。不允许负值：用百分比指定起止色位置。说明：用线性渐变创建图像。 写本文档时Firefox,Chrome,Opera已经在实验性质阶段支持了该属性，Safari对该属性的支持仍停留在以私有方式实现的阶段（可参阅页面底部的示例代码）。 Firefox还支持使用、和center特殊值定义渐变起点，并支持起点与角度一起使用。 Example: linear-gradient()_CSS参考手册_web前端开发参考手册系列 divwidth:200px;height:100px;margin-top:10px;border:1px solid #ddd; .testbackground:-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); .test2background:-moz-linear-gradient(#000,#f00 50%,#090);background:-webkit-gradient(linear,center top,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,#f00 50%,#090); .test3background:-moz-linear-gradient(left center,#000 20%,#f00 50%,#090 80%);background:-webkit-gradient(linear,left center,right center,color-stop(.2,#000),color-stop(.5,#f00),color-stop(.8,#090);background:-webkit-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:-o-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:-ms-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:linear-gradient(0deg,#000 20%,#f00 50%,#090 80%); .test4background:-moz-linear-gradient(45deg,#000,#f00 50%,#090);background:-webkit-gradient(linear,left bottom,right top,from(#000),color-stop(.5,#f00),to(#090);background:-webkit-linear-gradient(45deg,#000,#f00 50%,#090);background:-o-linear-gradient(45deg,#000,#f00 50%,#090);background:-ms-linear-gradient(45deg,#000,#f00 50%,#090);background:linear-gradient(45deg,#000,#f00 50%,#090); CSS3 图像取值 radial-gradient()语法：radial-gradient(,? | |2,?,+);： | | left | center | right ? | | top | center | bottom ?：circle | ellipse：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover：|：|?取值：用百分比指定径向渐变圆心的横坐标值。可以为负值。：用长度值指定径向渐变圆心的横坐标值。可以为负值。left：设置左边为径向渐变圆心的横坐标值。center：设置中间为径向渐变圆心的横坐标值。right：设置右边为径向渐变圆心的横坐标值。：用百分比指定径向渐变圆心的纵坐标值。可以为负值。：用长度值指定径向渐变圆心的纵坐标值。可以为负值。top：设置顶部为径向渐变圆心的纵坐标值。center：设置中间为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值。：指定渐变的起止颜色。circle：指定圆形的径向渐变ellipse：指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角contain：包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-sidecover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner写本文档时Firefox尚不支持：用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。：用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。：指定颜色。请参阅颜色值：用长度值指定起止色位置。不允许负值：用百分比指定起止色位置。说明：用径向渐变创建图像。 写本文档时Firefox和Chrome已经在实验性质阶段支持了该属性，Safari对该属性的支持仍停留在以私有方式实现的阶段。 Example: radial-gradient()_CSS参考手册_web前端开发参考手册系列 divwidth:200px;height:100px;margin-top:10px;border:1px solid #ddd; .testbackground:-moz-radial-gradient(center center,circle,#f00,#ff0,#080);background:-webkit-radial-gradient(center center,circle,#f00,#ff0,#080);background:-o-radial-gradient(center center,circle,#f00,#ff0,#080);background:-ms-radial-gradient(center center,circle,#f00,#ff0,#080);background:radial-gradient(center center,circle,#f00,#ff0,#080); .test2background:-moz-radial-gradient(circle contain,#f00,#ff0,#080);background:-webkit-radial-gradient(circle contain,#f00,#ff0,#080);background:-o-radial-gradient(circle contain,#f00,#ff0,#080);background:-ms-radial-gradient(circle contain,#f00,#ff0,#080);background:radial-gradient(circle contain,#f00,#ff0,#080); .test3background:-moz-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);background:-webkit-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);background:-o-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);background:-ms-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);background:radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%); .test4background:-moz-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);background:-webkit-radial-gradient(