CSS渐变之CSS3 gradient在Firefox3.6下的使用

Stella981
• 阅读 614

原文地址: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
原文作者: Alix Franquet

翻译作者:张鑫旭

一、引子

Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变。

如果你正在运行的Firefox 3.6的最新测试版,你应该看看我们的互 动演示,并查看相应的代码。使用单选按钮来切换不同的样式选项。
CSS渐变之CSS3 gradient在Firefox3.6下的使用

二、含CSS渐变的背景(backgrounds)

背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用,放大时也比较好看,可以 让您创造出一个更灵活的布局。

Firefox支持两种类型的CSS渐变:线性的(-moz-linear-gradient) 和放射状的(-moz-radial-gradient)。

三、线性渐变(Linear Gradients)

要创建一个线性渐变, 您需要设置一个起点和一个渐变的方向(或角度),并定义起止颜色。

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

起始点(Starting Point):起点的工作方式类似于background position。您可以设置水平和垂直位置为百分比,或以像素为单位,或在水平方向上可以使用left/center/right,在垂直方 向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置,它将默认为center。

例如,这里是一个线性渐变,开始于center(水平发现)和top(垂直发现),并从蓝色到白色。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

代码如下:

.linear_gradient_square {   width: 100px;   height: 100px;   border: 1px solid #333;   background: -moz-linear-gradient(top, blue, white); }

或者是起始于left(水平方向)和center(垂直方向)

CSS渐变之CSS3 gradient在Firefox3.6下的使用

主要部分代码如下:

background: -moz-linear-gradient(left, blue, white);

或者是起始于left(水平方向)和top(垂直方向)

CSS渐变之CSS3 gradient在Firefox3.6下的使用

主要部分代码如下:

background: -moz-linear-gradient(left top, blue, white);

角度(Angle):正如您在上面看到的,如果您不指定一个角度,它会根据起始位置自动定义。如果你想更多的控 制渐变的方向,您不妨设置角度试试。

例如,下面的两个渐变具有相同的起点left center,但是右手边的有一个20度的角度。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

后面一个含有角度的渐变核心代码如下:

background: -moz-linear-gradient(left 20deg, black, white);

当指定的角度,请记住,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底 部到顶部的垂直渐变。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

核心代码如下:

background: -moz-linear-gradient(<angle>, red, white);

起止颜色(Color Stops):除了起始位置和角度,你应该指定起止颜色。起止颜色是沿着渐变线,将会在 指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被 用来达到预期的效果。

下面是一个简单的例子,三个起止颜色。因为第一个和最后的颜色并未指定颜色点,他们将显示为默认的0%和100%。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

background: -moz-linear-gradient(top, blue, white 80%, orange);

如果没有指定位置,颜色会均匀分布。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

核心代码如下:

background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

透明度(Transparency):还支持透明渐变。这是相当有用的,例如,当堆叠多个背景时。这里是两个背 景的结合:一张图片,一个白色到透明的线性渐变。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

CSS渐变之CSS3 gradient在Firefox3.6下的使用

核心代码如下:

.multibackground_transparent {     background: -moz-linear-gradient(right, rgba(255,255,255,), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); }

四、径向渐变(Radial Gradients)

为径向渐变的语法非常类似于线性渐变。

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

除了您已经在线性渐变中看到的起始位置,方向,和颜色,径向梯度允许你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包 含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。

颜色起止(Color stops):就像用线性渐变,你应该沿着渐变线定义渐变的起止颜色。下面的圆具有相同 的起止颜色,但在左边的为默认的颜色间隔均匀的渐变,而右边的每种颜色都有特定的位置。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

background: -moz-radial-gradient(red, yellow, #1E90FF);  background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

形状(Shape):在这里你可以看到两个可能的形状间的差异,一个圆(左侧)和椭圆(右侧),两者都起始于 bottom left:

CSS渐变之CSS3 gradient在Firefox3.6下的使用

.radial_gradient_circle {     background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF); }  .radial_gradient_ellipse {     background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF); }

大小(Size):size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点。

示例:椭圆的近边VS远角
下面的两个椭圆有不同的大小。左边的一个是由从起始点(center)到近边的距离设定的,而右边的一个是由从起 始点到远角的的距离决定的。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);   background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

CSS渐变之CSS3 gradient在Firefox3.6下的使用

示例:圆的近边VS远边
左边的圆的渐变大小由起始点(center)到近边的距离决定,而右边的圆则有起始点到远边的距离决定。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);  background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

示例:包含圆
在这里你可以看到左侧的默认圈,同一渐变版本,但是被包含的右边的圆。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

background: -moz-radial-gradient(red, yellow, #1E90FF);  background: -moz-radial-gradient(contain, red, yellow, #1E90FF);

五、重复渐变(Repeating Gradients)

如果您想重复一个渐变,您可以使用-moz-repeating-linear-gradient-moz-repeating-radial-gradient

在下面的例子,每个实例都指定了四个起止颜色,并无限重复。

CSS渐变之CSS3 gradient在Firefox3.6下的使用

.repeating_radial_gradient_example {     background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); }  .repeating_linear_gradient_example {      background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); }

Demo
您可以查看线 性和径向渐变demo获取更多示例

六、译者的结语

以上为全文的全部内容,除了最后一点点关于版本的问题没有翻译外,其余均尽量如实翻译,其中为了便于理解,我自己也添加了一些图片。最后,本人翻译 能力有限,出现不准确在所难免,欢迎指正。

如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去 这里进行提问交流。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
2年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Stella981 Stella981
2年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这