这篇文章主要介绍了《CSS3 实战》笔记 -- 渐变设计(一, 需要的朋友可以参考下
基于 CSS 的渐变与图片渐变相比, 最大的优点是便于修改, 同时支持无级缩放, 过渡更加自然. 目前, 实现 CSS 渐变的只有基于 webkit 和 Gecko 引擎的浏览器, 基于 Presto 引擎的 Opera 浏览器暂时不支持渐变, 基于 Trident 的 IE 虽然可以通过滤镜的方式实现, 但并不提倡.
Webkit 引擎 (Safari 4 及以上版本) 的 CSS 渐变设计
基本语法:
-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)</pre>
参数说明:
- <type>
- : 定义渐变类型, 包括线性渐变 (linear) 和径向渐变(radial).
- <point>
- : 定义渐变起始点和结束点坐标, 即开始应用渐变的 x 轴和 y 轴坐标, 以及结束渐变的坐标. 该参数支持数值, 百分比和关键字, 如 (0,0)
- 或者 (left,top) 等. 关键字包括 top,bottom,left 和 right.
- <radius>
- : 当定义径向渐变时, 用来设置径向渐变的长度, 该参数为一个数值.
- <stop>
- : 定义渐变色和步长. 包括三个类型值, 即开始的颜色, 使用 from (color value)函数定义; 结束的颜色, 使用 to(color
- value)函数定义: 颜色步长, 使用 color-stop(value,color value)定义. color-stop()包含两个参数值,
- 第一个参数值为一个数值或者百分比值, 取值范围为 0~1.0(或者 0%~100%), 第二个参数值表示任意颜色值.
直线渐变基本用法:
/* 简单的线性渐变背景色, 从顶部到底部, 从蓝色向红色渐变显示 */** background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));</pre>
演示效果:
/* 从顶部到中间, 再从中间到底部, 从蓝色到绿色, 再到红色渐变显示 */ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));</pre>
演示效果:
/* 设计二重渐变, 从顶部到底部, 先是从蓝色到白色渐变显示, 再从黑色到红色渐变显示 */ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));</pre>
演示效果:
/* 通过设置不同的步长值, 从而设计多重渐变效果, 从顶部到底部, 先是从蓝色到白色渐变, 再从百色到黑色渐变, 最后是从黑色到红色渐变显示 */ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));</pre>
演示效果:
小结: color-stop()函数包含两个参数值, 第一个参数值指定角标位置, 第二个参数指定色标颜色. 一个渐变可以包含多个色标, 位置值为 0~1 之间的小数, 或者 0~100% 之间的百分数, 指定色标的位置比例.
径向渐变的基本用法
/* 同心圆(圆心坐标为 200,100), 内圆半径为 10, 外圆半径为 100, 内圆小于外圆半径, 从内圆红色到外圆绿色径向渐变, 超过外圆半径显示为绿色, 内圆显示红色 */ background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));</pre>
效果显示:
/* 同心圆(圆心坐标为 200,100), 内圆半径为 100, 外圆半径为 100, 内圆小于外圆半径, 从内圆红色到外圆绿色径向渐变. 当内圆和外圆半径相等时, 则渐变无效 */ background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));</pre>
演示效果:
/* 同心圆(圆心坐标为 200,100), 内圆半径为 100, 外圆半径为 10, 内圆大于外圆半径, 从内圆红色到外圆绿色径向渐变, 超出内圆半径显示为红色, 外圆显示绿色 */ background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));</pre>
演示效果:
/* 非同心圆, 内圆圆心和外圆圆心的距离小于两圆半径的差, 则显示上图效果, 呈现锥形径向渐变效果. 锥形的尖锐性与两圆圆心距离成正比 */ background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));</pre>
演示效果:
/* 同心圆, 在内圆到外圆中间 90% 的位置, 即距离外环内添加一个蓝色色标, 设计多层径向渐变, 如下图所示.*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));</pre>
演示效果:
/* 通过设置 to()函数的颜色值为透明, 可以设计发散的圆形效果 */ background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));</pre>
演示效果:
/* 通过设置 to()函数的颜色值为透明, 同时设计相似色, 可以设计球形效果 */ background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));</pre>
演示效果:
/* 通过为背景图定义多个径向渐变, 可以设计多个气泡效果, 如下图所示 */ background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;</pre>
演示效果:
渐变应用定义渐变效果的边框
代码:
- `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">`
- `<``html` `xmlns``=``"[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"``>`
- `<``head``>`
- `<``meta` `http-equiv``=``"Content-Type"` `content``=``"text/html; charset=utf-8"` `/>`
- `<``title``>Webkit 引擎的渐变实现方法</``title``>`
- `<``style` `type``=``"text/css"``>`
- `div {`
- `border-width: 20px;`
- `width: 400px;`
- `height: 200px;`
- `margin: 20px;`
- `-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;`
- `}`
- `</``style``>`
- `</``head``>`
- `<``body``>`
- `<``div``></``div``>`
- `</``body``>`
- `</``html``>`
演示效果:
定义填充内容效果
代码:
- `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">`
- `<``html` `xmlns``=``"[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"``>`
- `<``head``>`
- `<``meta` `http-equiv``=``"Content-Type"` `content``=``"text/html; charset=utf-8"` `/>`
- `<``title``>Webkit 引擎的渐变实现方法</``title``>`
- `<``style` `type``=``"text/css"``>`
- `.div1 {`
- `width:400px;`
- `height:200px;`
- `border:10px solid #A7D30C;`
- `background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));`
- `float:left;`
- `}`
- `.div1::before {`
- `width:400px;`
- `height:200px;`
- `border:10px solid #019F62;`
- `content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));`
- `display: block;`
- `}`
- `</``style``>`
- `</``head``>`
- `<``body``>`
- `<``div` `class``=``"div1"``>透视框</``div``>`
- `</``body``>`
- `</``html``>`
显示效果:
定义列表图标
- `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">`
- `<``html` `xmlns``=``"[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"``>`
- `<``head``>`
- `<``meta` `http-equiv``=``"Content-Type"` `content``=``"text/html; charset=utf-8"` `/>`
- `<``title``>Webkit 引擎的渐变实现方法</``title``>`
- `<``style` `type``=``"text/css"``>`
- `ul {`
- `list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))`
- `}`
- `</``style``>`
- `</``head``>`
- `<``body``>`
- `<``ul``>`
- `<``li``>新闻列表项 1</``li``>`
- `<``li``>新闻列表项 2</``li``>`
- `<``li``>新闻列表项 3</``li``>`
- `<``li``>新闻列表项 4</``li``>`
- `</``ul``>`
- `</``body``>`
- `</``html``>`
演示效果:
二
Gecko 引擎的 CSS 渐变设计直线渐变基本语法
-moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)
参数说明:
- <point>
- : 定义渐变起始点, 取值包含数值, 百分比, 也可以使用关键字, 其中 left,center 和 right 关键字定义 x 轴坐标,
- top,center 和 bottom 关键字定义 y 轴坐标. 当指定一个值时, 另一个值默认为 center .
- <angle>
- : 定义直线渐变的角度. 单位包括 deg,grad(梯度, 90 度 = 100grad),rad (弧度, 一圈等于 2*PI rad).
- <stop>
- : 定义步长, 用法与 Webkit 引擎的 color-stop()函数相似, 但是该参数不需要调用函数, 直接传递函数即可. 其中第一个参数设置颜色,
- 可以为任何合法的颜色值, 第二个值设置颜色的位置, 取值为百分比 (0~100%) 或者数值, 也可以省略步长设置.
直线渐变的基本用法
/* 最简单的线性渐变, 只需要指定开始颜色和结束颜色, 则默认从上到下实施线性渐变 */ background: -moz-linear-gradient(red, blue);</pre>
演示效果:
/* 从左上角到右下角的渐变, 其中 top 关键字设置起点的 x 轴, left 关键字设置起点的 y 轴坐标 */ background: -moz-linear-gradient(top left,red, blue)</pre>
演示效果:
/* 设置从左到右的五彩渐变, 其中 y 轴坐标默认为 center, 多个色标按步长平均显示 */ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);</pre>
演示效果:
/* 从左上角到右下角的红色渐变, 其中红色逐渐减弱, 并最终显示为透明 */ background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));</pre>
演示效果:
/* 设置角度值 */ background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));</pre>
演示效果:
小结: 当指定角度时, 是沿水平线按逆时针旋转定位的. 因此, 设置 0deg, 将产生从左向右的水平渐变, 而设置 90 度, 将创建一个从底部到顶部的渐变.
`/ 从上到下的多彩渐变, 其中在 y 轴的 80% 的位置, 添加一个绿色色标, 设计三色渐变效果. 如果没有指定位置则三色会均匀分布 */**background: -moz-linear-gradient(top, blue, green 80%, orange);`</pre>
演示效果:
/* 设计渐变半透明的效果的背景图片, 在背景图片上面覆盖一层从左到右为白色到透明的渐变填充层 */ background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);</pre>
演示效果:
径向渐变的基本语法
-moz-radial-gradient([<position> || <angle>,]?[shape] || <size>,]? <syop>,<stop>[,<stop>]*)
该函数的参数说明:
- <point>
- : 定义渐变起始点, 取值包含数值, 百分比, 也可以使用关键字, 其中 left,center 和 right 关键字定义 x 轴坐标,
- top,center 和 bottom 关键字定义 y 轴坐标. 当指定一个值时, 则另一个值默认为 center.
- <angle>
- : 定义直线渐变的角度. 单位包括 deg,grad(梯度, 90 度 = 100grad),rad (弧度, 一圈等于 2*PI rad).
- <stop>
- : 定义步长, 用法与 Webkit 引擎的 color-stop()函数相似, 但是该参数不需要调用函数, 直接传递函数即可. 其中第一个参数设置颜色,
- 可以为任何合法的颜色值, 第二个值设置颜色的位置, 取值为百分比 (0~100%) 或者数值, 也可以省略步长设置.
: 定义圆半径, 或者椭圆的轴长度 n
径向渐变的基本语法
/* 最简单的径向渐变, 从中间向外由红色, 黄色到蓝色渐变显示 */ background: -moz-radial-gradient(red, yellow, blue);</pre>
演示效果:
/* 最简单的径向渐变, 从中间向外由红色, 黄色道蓝色渐变显示, 并设置不同色标的显示位置 */ background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);</pre>
演示效果:
/* 径向渐变, 从左下角向外由红色, 黄色, 蓝色渐变显示, 并设置蓝色色标的显示位置 */ background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);</pre>
显示效果:
/* 径向渐变, 形状为圆形. 从左侧中间向外由红色, 黄色到蓝色渐变显示, 并设置蓝色色标的显示位置 */ background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);</pre>
演示效果:
/* 径向渐变, 形状为椭圆. 从中间向外由红色, 黄色到蓝色渐变显示, 并设置渐变尺寸为 cover 关键字 */ background: -moz-radial-gradient(ellipse cover, red, yellow, blue);</pre>
演示效果:
小结:
size 参数包含多个关键字, closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover. 使用这些关键字可以定义径向渐变的大小.
另外, Gecko 引擎还定义了 - moz-repeating-linear-gradient 和 - moz-repeating-radial-gradient 两个属性, 用来定义重复直线渐变和重复径向渐变.
background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);
演示效果:
background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);
演示效果:
渐变的应用
三
IE 浏览器引擎的 CSS 渐变实现方法
IE 并不支持 CSS 渐变, 但是提供了渐变滤镜, 可以用来实现简单的渐变效果.
基本语法
该参数的参数说明如下:
enabled: 设置或检索滤镜是否激活. 可选布尔值, 包括 true 和 false, 默认值为 true , 表示激活状态.
startColor : 设置或检索色彩渐变的开始颜色和透明度. 可选项, 其格式为 #AARRGGBB.AA,RR,GG,BB 为十六进制正整数, 取值范围为 00~FF.RR 指定红色值, GG 指定绿色值, BB 指定蓝色值, AA 指定透明度, 00 是完全透明, FF 是完全不透明. 超出取值范围的值将被恢复为默认值. 取值范围为 #FF0000~#FFFFFF, 默认值为 #FF0000FF, 即不透明蓝色.
EndColorStr : 设置或检索色彩渐变的结束颜色和透明度. 默认值为 #FF000000, 即不透明黑色.
IE 渐变滤镜实战应用
利用 IE 滤镜设计渐变背景, 然后通过背景图像设计图文插画效果.
代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- IE 浏览器引擎的 CSS 渐变实现方法
- </title>
- <style type="text/css">
- body { padding:1em;/ 让渐变背景填充整个页面 / margin:0; text-align:center; /* 为网页设计垂直渐变背景
- */ filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#9999FF,
- endColorStr=#ffffff); } h1 {/* 标题样式 */ color:white; font-size:18px; height:45px;
- line-height:65px;/* 控制文本显示位置 */ /* 以绝地定位方式实现块元素居中显示 */ position:absolute;
- left:50%; margin-left:-150px; padding-left:50px; border-bottom:solid 2px
- #c72223; /* 为标题插入一个装饰图标 */ background:url(images/icon4.PNG) no-repeat left
- center; } ul {/* 列表框样式 */ /* 清除列表默认样式 */ list-style-type:none; margin:90px
- 0 0 0; padding:0; background:url(images/bg6.PNG) no-repeat right bottom;/*
- 设计插图背景 */ clear:both; text-align:left;/* 恢复默认对齐方式 */ } li { line-height:1.5em;
- margin:6px auto; /* 为列表项设计个性化的列表图标 */ font-size:14px; background:url(images/icon3.PNG)
- no-repeat left 3px; padding-left:20px; }
- </style>
- </head>
- <body>
- <h1>
- 喜欢是一种心情, 爱是一种感受
- </h1>
- <ul>
- <li>
- 有一种爱叫痴缠, 比如很多人对张国荣的, 有时候这样真的挺好, 没有比爱一个故人更安全和永恒的了.
- </li>
- <li>
- 有一种爱叫迷恋, 某一时间里, 忽然发现自己迷上某个人或某种感觉, 但那不会长久. 有时候迷恋会转化成爱.
- </li>
- <li>
- 爱里面一定有迷恋, 有喜欢. 可迷恋, 喜欢都不是爱.
- </li>
- <li>
- 当自己终于明白什么是爱的时候, 往往生命去了大半. 人生路上能遇上一个真正爱自己的人, 是机缘.
- </li>
- <li>
- 有时候, 爱是一瞬间的感觉, 爱并不能长久保留, 如果两人经营得好才会长久保留下去. 爱同时是脆弱的, 爱会破碎.
- </li>
- <li>
- 有时候, 爱是一种心愿, 一种可以让自己与对方更快乐的心情. 一份美好的爱必定离不开包容.
- </li>
- <li>
- 有时候, 爱是一种自然. 花开花落, 云卷云舒的一点没有强求.
- </li>
- <li>
- 当能够以一种平淡的心情看待感情时, 爱便变得隽永.
- </li>
- <li>
- 爱情有时候让人变得很苛刻, 但后来又会很包容. 当爱对方超过爱自己, 那爱就会很包容.
- </li>
- <li>
- 喜欢一个人不会对他很苛刻, 因为喜欢不会有更多的要求. 相反爱却是苛刻的.
- </li>
- <li>
- 喜欢一个人不会为她很心痛, 爱却往往是很心痛. 爱是一种归属, 喜欢没有归属.
- </li>
- <li>
- 在喜欢与爱的边缘徘徊的人, 如果尝试着离开很远, 还能在某个深夜静静地想起他, 想到心痛与流泪, 那一定是爱了.
- </li>
- <li>
- 在爱上之前可能有很长的喜欢, 有时喜欢就能转化成爱, 有时喜欢也会淡掉. 原来人与人都是平行线上的一些点, 檫肩而过很平常, 向左转, 向右转,
- 下一个路口, 还会有新的风景.
- </li>
- <li>
- 有时候喜欢会带来遗憾, 但爱情会带来伤害. 这种伤害最后会变成对对方一生的祝福. 但喜欢就会越来越淡, 最后在心里留下一个淡漠的影子. 爱比喜欢要有力量.
- </li>
- </ul>
- </body>
- </HTML>
本次给大家推荐一个交流圈, 里面概括移动应用网站开发, CSS,HTML,webpack,vue node angular 以及面试资源等.
对 Web 开发技术感兴趣的同学, 欢迎加入: 582735936, 不管你是小白还是大牛我都欢迎, 还有大牛整理的一套高效率学习路线和教程与您免费分享, 同时每天更新视频资料.
最后, 祝大家早日学有所成, 拿到满意 offer, 快速升职加薪, 走上人生巅峰.
来源: http://www.qdfuns.com/article/51116/e96ac781379e31fd493478666d3aa1ce.html