《CSS3实战》笔记-渐变设计(一)

与图像渐变相比，基于CSS的渐变易于修改，支持无级缩放，过渡更加自然。目前只使用基于Webkit和Gecko引擎的浏览器实现CSS渐变，基于Presto引擎的Opera浏览器暂时不支持渐变，基于Trident的IE可以通过滤镜实现，但不提倡。

Webkit引擎的CSS渐变设计(Safari 4及以上)。

基本语法：

-web kit-渐变(类型，点[，半径]？点[，半径]？[，stop]*)参数描述：

Type:定义渐变类型，包括线性渐变和径向渐变。

Point:定义渐变的起点和终点的坐标，即开始应用渐变的x轴和y轴坐标以及结束渐变的坐标。此参数支持值、百分比和关键字，如(0，0)或(左，上)。包括上、下、左、右。

Radius:用于定义径向渐变时设置径向渐变的长度。该参数是一个数值。

Stop:定义梯度和步长。包括三种类型的值，即起始颜色，由from (color value)函数定义；结束颜色由to(颜色值)函数定义：颜色步长由颜色停止(值，颜色值)定义。Color-stop()包含两个参数值，第一个参数值为数值或百分比值，取值范围为0~1.0(或0%~100%)，第二个参数值代表任意颜色值。

直线渐变的基本用法：

/*简单的线性渐变背景色，从上到下，从蓝色到红色*/background :-WebKit-Gradient(线性，左上，左下，从(蓝色)，到(红色))；示范效应：

/*从上至中，然后从中至下，从蓝色到绿色，再到红色*/background :-WebKit-渐变(线性，左上方，左下方，从(蓝色)，到(红色)，颜色-停止(50%，绿色))；示范效应：

/*设计双渐变，从上到下，首先从蓝色到白色，然后从黑色到红色*/background :-WebKit-渐变(线性，左上方，左下方，从(蓝色)，到(红色)，颜色停止(0.5，# fff)，颜色停止(。示范效应：

/*通过设置不同的步长值，可以设计多个渐变效果，从上到下，先从蓝色到白色，再从百色到黑色，最后从黑色到红色。*/background :-WebKit-渐变(线性，左上方，左下方，从(蓝色)到(红色)，颜色停止(0.0。示范效应：

总结：函数color-stop()包含两个参数值，第一个参数值指定角标记位置，第二个参数指定颜色标记颜色。一个渐变可以包含多个色标。位置值是0到1之间的小数，或者是0到100%之间的百分比。指定色标的位置比例。

径向梯度的基本用法。

/*同心圆(中心坐标为200，100)，内圆半径为10，外圆半径为100，内圆小于外圆半径，由内圆红色向外圆绿色逐渐呈放射状变化，超过外圆半径时呈绿色，内圆呈红色*/Background 3360-WebKit-Gradient(Radial，200，100，10，220)。效果显示：

/*同心圆(中心坐标为200，100)，内圆半径为100，外圆半径为100，内圆小于外圆半径，由内圆红色向外圆绿色逐渐呈放射状变化。当内外圆半径相等时，渐变无效*/背景：-WebKit-渐变(径向，200 100，100，200 100，100，100，从(红色)，到(绿色))；示范效应：

/*同心圆(中心坐标为200，100)，内圆半径为100，外圆半径为10，内圆大于外圆半径，由内圆红到外圆绿逐渐呈放射状变化，超过内圆半径外圆以红色显示，外圆以绿色显示*/Background 3360-WebKit-Gradient(Radial，200，100，100，演示效果：

/*非同心圆，内圆圆心和外圆圆心的距离小于两圆半径的差，则显示上图效果，呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/background :-web套件-渐变(径向，120 100，10，200 100，100，从（红色)到（绿色));演示效果

/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标，设计多层径向渐变，如下图所示*/background :-web套件-渐变（径向，200 100,10,200 100,100,从（红色)到（绿色),颜色停止(90%,蓝色));演示效果

/*通过设置至()函数的颜色值为透明，可以设计发散的圆形效果*/background :-web kit-gradient(radial，200 100，10，200 100，90，from(红色)，to(rgba(1，159，98，0)))；演示效果

/*通过设置至()函数的颜色值为透明，同时设计相似色，可以设计球形效果*/background :-web套件-渐变（径向，180 80,10,200 100,90,从(#00C)，到(rgba(1，159，98，0))，色停(98%，# 0CF))；演示效果

/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/background :-webkit-gradient(radial，45 45，10，52 50，30，从(#A7D30C)，到(rgba(1，159，98，0))、color-stop(90%，#019F62))、-web kit-gradient(radial，105 105，20，112 120，50，从(#ff5f98)，到(rgba(255，1，136，0))填充盒；-web kit-背景-clip:内容框；演示效果

渐变应用定义渐变效果的边框

代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleWebkit引擎的渐变实现方法/title style type=' text/CSS ' div { border-width : 20px；宽度： 400像素；高度： 200像素；margin: 20px-web套件-border-image :-web套件-gradient(线性、左上、左下、从(#00abeb)、到(#fff)、色停(0.5、#fff)、色停(0.5、# 66 cc 00))20；}/style/head dydiv/div/body/html演示效果

定义填充内容效果

代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleWebkit引擎的渐变实现方法/title style type=' text/CSS '。div 1 {宽度：400 px高度：200 pxborder:10px实心# A7D 30 Cbackground :-网络套件-渐变（线性，左上，左下，从(#00abeb)，到(#fff)，颜色停止(0.5，#fff)，颜色停止(0.5，# 66cc 00))；浮动： left } . div 1: before。在{宽度：400像素高度：200 pxborder:10px固体# 019F62content :-web套件-渐变（径向，200 100,10,200 100,100,从(#A7D30C)，到(rgba(1，159，98，0))，颜色停止(90%，# 019 f62))；显示器：块；}/style/head dydiv class=' div 1 '透视框/div/body/html显示效果

定义列表图标

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleWebkit引擎的渐变实现方法/title style type=' text/CSS ' ul { list-style-image :-web kit-gradient(radial，center center，4，center center，8，from(#ff0000)，to(rgba(0，0，0，0))，color-stop(90%，# DD 0000))}/style/head dyul Li新闻列表项1/李莉新闻列表项2/李莉新闻列表项3/李莉新闻列表项4/li /ul/body/html演示效果