《CSS3实战》笔记--渐变设计（二)

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);

演示效果： 

/*从左上角到右下角的渐变，其中top关键字设置起点的x轴，left关键字设置起点的y轴坐标*/
background: -moz-linear-gradient(top left,red, blue)

演示效果： 

/*设置从左到右的五彩渐变，其中y轴坐标默认为center，多个色标按步长平均显示*/
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

演示效果： 

/*从左上角到右下角的红色渐变，其中红色逐渐减弱，并最终显示为透明*/
background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));

演示效果： 

/*设置角度值*/
background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));

演示效果：

小结：当指定角度时，是沿水平线按逆时针旋转定位的。因此，设置0deg,将产生从左向右的水平渐变，而设置90度，将创建一个从底部到顶部的渐变。

/*从上到下的多彩渐变，其中在y轴的80%的位置，添加一个绿色色标，设计三色渐变效果。如果没有指定位置则三色会均匀分布*/
background: -moz-linear-gradient(top, blue, green 80%, orange);

演示效果： 

/*设计渐变半透明的效果的背景图片，在背景图片上面覆盖一层从左到右为白色到透明的渐变填充层*/
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);

演示效果：

径向渐变的基本语法

-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);

演示效果： 

/*最简单的径向渐变，从中间向外由红色，黄色道蓝色渐变显示，并设置不同色标的显示位置*/
background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);

演示效果： 

/*径向渐变，从左下角向外由红色，黄色，蓝色渐变显示，并设置蓝色色标的显示位置*/
background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);

显示效果： 

/*径向渐变，形状为圆形。从左侧中间向外由红色，黄色到蓝色渐变显示，并设置蓝色色标的显示位置*/
background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);

演示效果： 

/*径向渐变，形状为椭圆。从中间向外由红色，黄色到蓝色渐变显示，并设置渐变尺寸为cover关键字*/
background: -moz-radial-gradient(ellipse cover, red, yellow, blue);

演示效果：

小结：
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);

演示效果：

渐变的应用

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Webkit引擎的应用</title><style type="text/css">body {/*页面初始化*/ background-color: #454545; margin:1em; padding:0;}.box {/*设计模块样式*/ -moz-border-radius: 10px;/*设计圆角*/ -moz-box-shadow: 0 0 12px 1px rgba(205, 205, 205, 1);/*设计阴影特效*/ border: 1px solid black; padding: 10px; max-width: 600px;/*最大宽度显示*/ margin: auto;/*居中显示*/ text-shadow: black 1px 2px 2px;/*设计文本包含阴影*/ color: white; background-image: -moz-linear-gradient(bottom, black, rgba(0, 47, 94, 0.2), white); /*设计直线渐变背景*/ background-color: rgba(43, 43, 43, 0.5);}.box:hover {/*设计鼠标经过时，放大阴影亮度*/ -moz-box-shadow: 0 0 12px 5px rgba(205, 205, 205, 1);}h2 {/*在标题前面添加额外内容*/ font-size: 120%; font-weight:bold; text-decoration:underline;}h2:before { content: "标题：";}p { padding: 6px; text-indent:2em; line-height:1.8em; font-size:14px;}</style></head><body><div class="box"> <h2>关于文字</h2> <p>我对随便哪种感觉的文字上手都很快。曾经我用一天的时间看完《第一次亲密接触》然后第二天就写出了两万多字类似的东西，把同  学吓得目瞪口呆。尽管我认为那种东西几乎没有存在的价值，时光可以轻而易举地把它淹没得不留一丝痕迹。 </p> <p>我把考试中得到满分的作文随便丢掉，却把老师说的毫无内涵的文章装订好放在抽屉里。我常把自己的故事写下来然后拿给同学看，  然后他们感动得一塌糊涂。 </p> <p>……</p></div></body></html>

演示效果：

赞 (0)

相关推荐

  • 使用 stylelint检查CSS_StyleLint

    使用 stylelint检查CSS_StyleLint

    当你书写大量的CSS代码时,可能会出现不止一个的错误.可能需要某个工具来阻止你CSS书写的错误. 可能,有的时候你的错误真的是一个bug.也有可能仅仅因为草率造成的不一致或者不明确的代码风格.可能它们当中的许多看起来微不足道(取决于你的性子),但是随着代码库的增多以及时间累积,许多人使用时就会做出有丑陋的东西.事情的后果不是你可以想象的. 你尝试去控制自己.你的同事也帮助你,当你游离及时纠正你的错误.但是,你和你的同事都是错误的制造者,所以最后至少在一定程度上都不可避免的失败了.后来,你或者其他

  • 《CSS3实战》笔记--渐变设计（三)

    《CSS3实战》笔记--渐变设计（三)

    IE浏览器引擎的CSS渐变实现方法 IE并不支持CSS渐变,但是提供了渐变滤镜,可以用来实现简单的渐变效果. 基本语法 该参数的参数说明如下: enabled:设置或检索滤镜是否激活.可选布尔值,包括 true 和 false,默认值为 true ,表示激活状态. startColor :设置或检索色彩渐变的开始颜色和透明度.可选项,其格式为#AARRGGBB.AA,RR,GG,BB为十六进制正整数,取值范围为00~FF.RR指定红色值,GG指定绿色值,BB指定蓝色值,AA指定透明度,00是完全

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

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

    基于CSS的渐变与图片渐变相比,最大的优点是便于修改,同时支持无级缩放,过渡更加自然.目前,实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器,基于Presto引擎的Opera浏览器暂时不支持渐变,基于Trident的IE虽然可以通过滤镜的方式实现,但并不提倡. Webkit引擎(Safari 4及以上版本)的CSS渐变设计 基本语法: -webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<

  • 《CSS3实战》笔记--渐变设计（二)

    《CSS3实战》笔记--渐变设计（二)

    Gecko引擎的CSS渐变设计直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*) 参数说明: <point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right 关键字定义 x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标.当指定一个值时,另一个值默认为 cen

  • IOS笔记061之二维码的生成和扫描

    如今二维码随处可见,无论是实物商品还是各种礼券都少不了二维码的身影.而手机等移动设备又成为二维码的一个很好的应用平台,不管是生成二维码还是扫码二维码.本篇文章从生成二维码.扫描二维码展开分析,通过内容分析二维码用起来也很easy了. 首先说下生成二维码 二维码可以存放纯文本.名片或者URL 其次生成二维码的步骤: 导入CoreImage框架 再次通过滤镜CIFilter生成二维码 1.创建过滤器 2.恢复滤镜的默认属性 3.设置内容 4.获取输出文件 5.显示二维码 代码实现 CoreImage

  • JQuery 学习笔记 选择器之二

    复制代码 代码如下: <!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=&qu

  • SpringCloud远程服务调用实战笔记

    笔记 在微服务中,若想要使用远程调用,需要引入spring-cloud-starter-openfeign(在使用注册中心的环境下) <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-openfeign</artifactId> <version>xxx</version> </depe

  • JavaScript面向对象设计二 构造函数模式

    我们将使用构造函数模式将工厂模式进行改写. 复制代码 代码如下: function Employee(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function () { alert(this.name); }; } var Jim = new Employee("jim", 22, "SoftWare Engineer"); var Sun

  • JavaScript高级程序设计 阅读笔记（十二） js内置对象Math

    Math对象的属性 E:值e,自然对数的底 LN10:10的自然对数 LN2:2的自然对数 LOG2E:以2为底E的对数 LOG10E:以10为底E的对数 PI:值派 SQRT1_2:1/2 的平方根 SQRT2:2的平方根 Math对象的方法:最大值与最小值 min()&&max()用于取一组数中的最小值跟最大值. 示例: 复制代码 代码如下: var iMax=Math.Max(1,2,3); alert(iMax);//outputs 3 var iMin=Math.Min(1,2,

  • JavaScript 学习笔记（十二） dom

    Dom createElement().createTextNode().appendChild().removeChild().replaceChild().insertBefore().createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement("p"); oP.innerHTML = "<font style='color:red;'>Hell

  • Android学习笔记——Menu介绍(二)

    Android学习笔记——Menu介绍(二)

    知识点: 这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu). 上下文菜单 上下文菜单提供对UI界面上的特定项或上下文框架的操作,就如同Windows中右键菜单一样. 在Android中,有两种提供上下文操作的方式:一种是在浮动的上下文菜单(长按弹出)中,另一种是上下文操作模式里. 那么怎样创建一个浮动的上下文菜单(floating context menu)呢? 1.调用registerForContextMenu()方法为V

随机推荐