css渐变效果,css倒影渐变

1. 盒阴影
（1）box-shadow是给对象实现图层阴影效果，基本语法如下：
对象选择器｛box-shadow：投影方式 || x轴偏移量 || y轴偏移量 || 阴影模糊半径 || 阴影扩展半径 || 阴影颜色｝
（2）box-shadow属性参数说明

参数类型取值说明投影方式此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，起投影就是内阴影。x轴偏移量即阴影的水平偏移量，其值可以是正负值，如果值为正值，则阴影在对象的右边；反之，如果值为负值，则阴影在对象的左边。y轴偏移量即阴影的垂直偏移量，其值也可以是正负值，如果值为正值，则阴影在对象的底部；反之，如果值为负值，则阴影在对象的顶部。阴影模糊半径此参数为可选，但其值只能为正值，如果值为0,则表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。阴影扩展半径此参数为可选，其值可以是正负值，如果值为正值，则整个阴影都延展扩大;反之,如果值为负值, 则阴影缩小。阴影颜色此参数为可选，如果不设定任何颜色，则浏览器会取默认色，但各浏览器的默认颜色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

（3）使用示例

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>对象阴影</title><style type="text/css">.box{box-shadow: 7px 4px 10px #000 inset;width: 300px;height: 80px;}.box1 img{box-shadow: #000 7px 4px 10px;}</style></head><body><h3>盒子对象阴影测试</h3><div class="box">DIV盒子内阴影</div><h3>图片对象阴影测试</h3><div class="box1"><img src="images/1.png"></div></body></html>

（4）运行结果

2.CSS3渐变
渐变是两种或多种颜色之间的平滑过渡。CSS3渐变属性主要包括线性渐变、径向渐变和重复渐变。
（1）线性渐变
在CSS3中的线性渐变通过“background-image:linear-gradient(参数值）;”来设置，其基本语法格式如下：
background-image:linear-gradient([<angle>] | <side-or-corner>, | color stop, color stop[, color stop] *);其中，[ ]中的参数为可选值。

a、linear-gradient属性的参数说明

参数类型取值说明<angle>表示渐变的角度，角度数的取值范围是0- 860deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。<side-or-corner>通过关键词来确定渐变的方向。默认值为top（从上向下）取值范围是ltf.right,top,bottom,center,top right,top ltft,bottom left,bottom right,eft center,right center]。注意: IE10只能取[left,top]，Chrome 则没有[center,left center,right center]<side-or-corner>用于设置颜色边界, color 为边界的颜色，stop 为该边界的位置，stop 的值为像素数值或百stop之间的区域为颜色过渡区stop之间的区域为颜色过渡区。

b、使用示例

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>CSS3渐变</title><style type="text/css">/*CSS3 线性渐变*/.rainbow-linear-gradient{width: 460px;height: 160px;background-image: -webkit-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%);} </style></head><body><h1>线性渐变</h1><div class="rainbow-linear-gradient"></div></body></html>

c、运行结果

（2）径向渐变
CSS3中的径向渐变通过“background-image: radial-gradient (参数值) ;”来设置，其基本语法格式如下：background- image: radial-gradient(圆心坐标，渐变形状渐变大小，color stop,color stop[,color stop] *) ;

a、radial -gradient的参数取值说明

参数类型取值说明圆心坐标用于设置放射圆形的坐标，可设置为形如10px 20px的x-offset y-offset，或使用预设值center (默认值)渐变形状circle：圆形；ellipse：椭圆形，默认值；渐变大小closest-side或containl：以距离圆心最近的边的距离作为渐变半径； closest-comer：以距离圆心最近的角的距离作为渐变半径；farthest-side ：以距离圆心最远的边的距离作为渐变半径；farthest-corner或cove：以距离圆心最远的角的距离作为渐变半径

b、使用示例

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>CSS3渐变</title><style type="text/css">/*CSS3 径向渐变*/.rainbow-radial-gradient{width:300px;height: 300px;background-image: -webkit-radial-gradient(100px, #ffe07b 15%,#ffb151 2%, #16104b 50%)}</style></head><body><h1>径向渐变</h1><div class="rainbow-radial-gradient"></div></body></html>

c、运行结果