《CSS3实战》--渐变设计

时间  2019-11-29 标签 CSS3实战 渐变 设计

这篇文章主要介绍了《CSS3实战》笔记--渐变设计（一,须要的朋友能够参考下javascript

基于CSS的渐变与图片渐变相比，最大的优势是便于修改，同时支持无级缩放，过渡更加天然。目前，实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器，基于Presto引擎的Opera浏览器暂时不支持渐变，基于Trident的IE虽然能够经过滤镜的方式实现，但并不提倡。css

Webkit引擎（Safari 4及以上版本）的CSS渐变设计html

基本语法：vue

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)</pre>java

参数说明：node

<type>:定义渐变类型，包括线性渐变（linear）和径向渐变（radial）。webpack

<point>:定义渐变起始点和结束点坐标，即开始应用渐变的x轴和y轴坐标，以及结束渐变的坐标。该参数支持数值，百分比和关键字，如（0，0）或者（left，top）等。关键字包括top，bottom，left和right。web

<radius>:当定义径向渐变时，用来设置径向渐变的长度，该参数为一个数值。面试

<stop>:定义渐变色和步长。包括三个类型值，即开始的颜色，使用from （color value）函数定义；结束的颜色，使用to（color value）函数定义：颜色步长，使用color-stop（value，color value）定义。color-stop（）包含两个参数值，第一个参数值为一个数值或者百分比值，取值范围为01.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（）函数包含两个参数值，第一个参数值指定角标位置，第二个参数指定色标颜色。一个渐变能够包含多个色标，位置值为01之间的小数，或者0100%之间的百分数，指定色标的位置比例。

径向渐变的基本用法

/*同心圆（圆心坐标为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为十六进制正整数，取值范围为00FF。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，快速升职加薪，走上人生巅峰。

联系我们 沪ICP备13005482号-10