『Reprint』GRADUAL
2019独角兽企业重金招聘Python工程师标准>>>
CSS渐变之CSS3 gradient在Firefox3.6下的使用
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=727
原文地址:http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
原文作者:Alix Franquet
翻译作者:张鑫旭
一、引子
Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变。
如果你正在运行的Firefox 3.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(垂直发现),并从蓝色到白色。
代码如下:
.linear_gradient_square {width: 100px;height: 100px;border: 1px solid #333;background: -moz-linear-gradient(top, blue, white);}
或者是起始于left(水平方向)和center(垂直方向)
主要部分代码如下:
background: -moz-linear-gradient(left, blue, white);
或者是起始于left(水平方向)和top(垂直方向)
主要部分代码如下:
background: -moz-linear-gradient(left top, blue, white);
角度(Angle):正如您在上面看到的,如果您不指定一个角度,它会根据起始位置自动定义。如果你想更多的控制渐变的方向,您不妨设置角度试试。
例如,下面的两个渐变具有相同的起点left center,但是右手边的有一个20度的角度。
后面一个含有角度的渐变核心代码如下:
background: -moz-linear-gradient(left 20deg, black, white);
当指定的角度,请记住,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。
核心代码如下:
background: -moz-linear-gradient(<angle>, red, white);
起止颜色(Color Stops):除了起始位置和角度,你应该指定起止颜色。起止颜色是沿着渐变线,将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被用来达到预期的效果。
下面是一个简单的例子,三个起止颜色。因为第一个和最后的颜色并未指定颜色点,他们将显示为默认的0%和100%。
background: -moz-linear-gradient(top, blue, white 80%, orange);
如果没有指定位置,颜色会均匀分布。
核心代码如下:
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
透明度(Transparency):还支持透明渐变。这是相当有用的,例如,当堆叠多个背景时。这里是两个背景的结合:一张图片,一个白色到透明的线性渐变。
核心代码如下:
.multibackground_transparent {background: -moz-linear-gradient(right, rgba(255,255,255,0), 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):就像用线性渐变,你应该沿着渐变线定义渐变的起止颜色。下面的圆具有相同的起止颜色,但在左边的为默认的颜色间隔均匀的渐变,而右边的每种颜色都有特定的位置。
background: -moz-radial-gradient(red, yellow, #1E90FF);background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
形状(Shape):在这里你可以看到两个可能的形状间的差异,一个圆(左侧)和椭圆(右侧),两者都起始于bottom left:
.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)到近边的距离设定的,而右边的一个是由从起始点到远角的的距离决定的。
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);
示例:圆的近边VS远边
左边的圆的渐变大小由起始点(center)到近边的距离决定,而右边的圆则有起始点到远边的距离决定。
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);
示例:包含圆
在这里你可以看到左侧的默认圈,同一渐变版本,但是被包含的右边的圆。
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。
在下面的例子,每个实例都指定了四个起止颜色,并无限重复。
.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);}
转载于:https://my.oschina.net/u/1865850/blog/299633
『Reprint』GRADUAL相关推荐
- 『Reprint』转载
2019独角兽企业重金招聘Python工程师标准>>> 去年 11 月他有一个演讲(Youtube),谈到了好的 Javascript 编程风格是什么. 我非常推荐这个演讲,它不仅有 ...
- 『Reprint』 复杂表单应用解耦,淘宝机票订单实践
2019独角兽企业重金招聘Python工程师标准>>> 背景 在web应用中,复杂表单这类web应用富交互元素多,业务逻辑复杂,犬牙交错,且需求变化频繁.及容易成为晦涩和幽暗之地,也 ...
- 『转载』Debussy快速上手(Verdi相似)
『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是 ...
- 『参考』.net CF组件编程(4)——为自定义组件添加工具箱图标!
前言: 在前三篇的文章中,和大家一起创建了一个用于TCP连接检测的小组件,如果你记不得了,可以通过以下链接去回顾一下: 『参考』.net CF组件编程(1)--基础之后 『参考』.net CF组件编程 ...
- 『TensorFlow』命令行参数解析
argparse很强大,但是我们未必需要使用这么繁杂的东西,TensorFlow自己封装了一个简化版本的解析方式,实际上是对argparse的封装 脚本化调用tensorflow的标准范式: impo ...
- 『Numpy』常用方法记录
numpy教程 防止输出省略号 import numpy as np np.set_printoptions(threshold=np.inf) 广播机制 numpy计算函数返回默认是一维行向量: i ...
- 2018年『web』开发者不得不知的技术趋势
作为一个『web』开发者,无论是做前端还是后端,都应该时刻保持着对技术的敏感性.技术的流行需要一定时间的沉淀,有哪些web相关的技术会可能会在2018年成为web开发的新宠呢?下面列举业界经过实践并且 ...
- 『TensorFlow』函数查询列表_张量属性调整
博客园 首页 新随笔 新文章 联系 订阅 管理 『TensorFlow』函数查询列表_张量属性调整 数据类型转换Casting 操作 描述 tf.string_to_number (string_te ...
- 『TensorFlow』专题汇总
TensorFlow函数查询 『TensorFlow』0.x_&_1.x版本框架改动汇总 『TensorFlow』函数查询列表_数值计算 『TensorFlow』函数查询列表_张量属性调整 『 ...
最新文章
- soj1201- 约数
- 卸载源码安装mysql_CentOS 7.x 卸载删除MariaDB,重新安装,安装MYSQL离线版和源代码...
- C++设计模式之工厂方法模式
- python跳转到程序顶部_python-如何使Tkinter窗口跳到最前面?
- java 19 - 11 异常的注意事项
- 向银行贷款20万, 分期三年买50万的车,个人借款40万, 贷款10年买200万的房子,再贷款120万分创业...
- HTML 5 Canvas
- .net实现批量在线打印_如何实现报表的批量打印需求
- SpringSecurity 流程图
- java 内存管理_高性能Java代码之内存管理
- 斐波那契数列的量化分析
- Notepad++软件的下载与安装步骤(图文详解)
- 感知器(Perceptron)
- TransformerEncoder
- perl 脚本学习-----两个文件排序之后输入到一个文件
- 软件工程的可行性分析
- Flash:形变动画的制作
- Kotlin 语言必看书籍推荐
- 【来龙去脉系列】机器学习入门必读
- 零钱兑换(完全背包)
热门文章
- 基于单目视觉的平面目标定位和坐标测量 (下) - 相机姿态估计和目标测量
- 政务服务一网通办建设方案(ppt)
- PR AE安装成功后启动卡死的解决
- [机缘参悟-84]:读《心若菩提 - 曹德旺》有感
- 贾伟:因痛而生,打造真正的产品思维(荐书)
- layui-layer.open打开新页面进行数据处理,处理完成后数据表格重载问题
- Android中屏蔽有新短信时通知栏里的通知
- 【NYOJ】[845]无主之地1
- 23年海南大学软件工程835考研初试资料分享
- python汽车类_用Python代码实现汽车类,类用,python