HTML背景渐变圆圈,背景渐变:html5+css3中的background: -moz-linear-gradient 用
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性。
背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用,放大时也比较好看,可以让您创造出一个更灵活的布局。
Firefox支持两种类型的CSS渐变:线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。三、线性渐变(Linear Gradients)
要创建一个线性渐变,您需要设置一个起点和一个渐变的方向(或角度),并定义起止颜色。
-moz-linear-gradient( [ || ,]? , [, ]* )
起始点(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(, 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([ || ,]?
[ || ,]? ,
[, ]*);
除了您已经在线性渐变中看到的起始位置,方向,和颜色,
径向梯度允许你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (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);}
HTML背景渐变圆圈,背景渐变:html5+css3中的background: -moz-linear-gradient 用相关推荐
- html5+css3中的background: -moz-linear-gradient 用法
http://hi.baidu.com/zyyhyzazwm/item/72dc6c9a40513acf1a49df56 在CSS中background: -moz-linear-gradient 让 ...
- html5 css 响应式_在HTML5 / CSS3中编写响应式简历
本文是我们的" Web响应式设计系列"的一部分,该系列由工具,资源和教程组成,可帮助您为所有平台的用户创建网站. 单击此处查看同一系列的更多文章. 业务部分的几乎每个人都在某个时间 ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- html5 css3中的一些笔记
<!DOCTYPE html> <html> <head><meta charset="utf-8" ><title>c ...
- CSS3中border-radius、box-shadow与gradient那点事儿
一.border-radius border-radius用于添加圆角边框,用处非常广泛. 1)一个值,代表了四个角 .radius-one {/* Safari 3-4, iOS 1-3.2, An ...
- css3中的background
对background的两种运用:一是background中的线性渐变,background: linear-gradient(to bottom,#0e7bef,#0d73da);这个是对背景颜色从 ...
- php背景图片不重复居中代码,CSS3中background-image实现多背景图片(代码实例)
本文目标: 1.掌握background-image多背景的实现 问题: 1.实现以下效果,使用纯DIV+CSS,必须使用background-image 2.创建好index.html,写好架构,架 ...
- CSS3中的 Background linear gradient()用法
本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章 这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-grad ...
- CSS3渐变属性:线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
最新文章
- java mysql 是否插入 成功_您如何确定使用Java和MySQL插入或更新是否成功?
- 以后要把flex用起来
- 2013ACM多校联合(2)
- Nginx内核参数相关的优化设定
- 断言、触发器、存储过程
- 计算机网络讨论4,计算机网络实验四
- 用python祝福父亲节_父亲节到来 最适合给年老的父亲祝福语
- 剖析Caffe源码之Layer
- HelloDjango 第 06 篇:博客从“裸奔”到“有皮肤”
- SQL Server 按某一字段分组取最大(小)值所在行的数据
- svn一些基本操作含义
- web网站制作的实例(大学生期末作业)集合
- Matlab/Simulink怎么输出低版本仿真文件?
- IPD流程框架及实施关键点
- [css]画圆形标签
- 获取网易云音乐播放链接
- Spring 增强处理Advice
- scala groupby用法
- 企业微信开发——企业内部自建应用开发(第二篇)---JS_SDK配置
- 广东省学计算机那间技校好,广东哪个技校最好?广东这边哪些技校好?
热门文章
- 软件配置 | pip下载第三方库文件及配置pip源的不完全总结
- 上传图片校验图片类型、大小及尺寸
- 怎么修改服务器上的分数,在服务器上设置 WinSAT 分数
- Last_IO_Error: Fatal error: The slave I/O thread stops because master and slave have equal MySQL ser
- 射极跟随器的负载加重情况
- Python 基础 1.0
- BCD码和ASCII码的相互转换
- deepin efi 启动u盘_deepin启动引导修复教程
- 如何使用Python api 函数写股票策略
- php checkbox多选框默认选中的实现。