CSS3 渐变背景详解
W3C 与 2010年11月份 正式支持渐变背景样式,背景图像源可以定义为渐变背景
渐变背景包括 线性渐变和 径向渐变俩种类型
1.线性渐变
创建一个线性渐变 只需要两个颜色 ,也可以选择设置一个起点或一个方向,用法:
linear-gradient (angle , color-stop1 , color-stop2 , …)
angle : 渐变方向 取值为角度或者关键字。关键字包括一下4个:
关键字 | 作用 |
---|---|
to left: | 设置渐变从右到左,相当于270deg。 |
to right: | 设置渐变从左到右,相当于90deg。 |
to top: | 设置渐变从下到上,相当于0deg。 |
to bottom: | 设置渐变从上到下,相当于180deg。该值为默认值。 |
DEG PS:在CSS中角度单位有:度(deg)、梯度(grad)\弧度(rad)。无论如何声明,这些值都会解释为0~360范围内的度数。如:-90deg=270deg。
例:如果创建对角渐变线,可以使用to top left(从右下到左上)、
color-stop:指定渐变的色点
实例设计:
本例使用 linear-gradient ()函数为页面设计渐变网页背景演示如下:
代码如下:
1.重复线性渐变
知识点:使用 repearing-linear-gradient()函数可以定义 重复线性,用法与 linaer-gradient()函数相同。
注意:使用重复线性渐变的关键是要定义好色点,让最后一个颜色和第一个颜色能够很好的连接起来,处理不当将导致颜色的急剧变化。
实例设计:
代码如下:
????径向 渐变
创建一个径向渐变,至少定义两个颜色,同时可以指定渐变的中心点位置、形状类型(圆形或椭圆形)
radial-gradient()用法如下:
shape:用来指定渐变的类型,包括circle(圆形)和 ellipse(椭圆形)两种。
size: 如果类型为 circle 指定一个值设置⚪圆形的半径;如果类型为 ellipse 指定两个值分别设置椭圆的x和
y轴半径。取值包括长度值,百分比,关键字说明如下:
☁closet -side: 指定径向渐变的半径长度为从中心点到最近的边。
☁closet -corner: 指定径向渐变的半径长度为从中心点到最近的角。
⚡farthest -side: 指定径向渐变的半径长度为从中心点到最远的角。
⚡farthest-corner: 指定径向渐变的半径长度为从中心点到最远的角。
????position:用来指定中心点,如果提供两个参数,第一个表示x,第二个表示y,
如果提供一个参数,第二个值默认 50%, 即最终会被转换为具体的长度。
实例设计:
本例使用 CSS3 径向渐变制作圆形球体,主要利用多重背景进行设计,然后使用径向渐变叠加设计球体和发光的光晕效果。
重复 径向 渐变
知识点:使用 repeating-radial-gradient() 函数
可以定义重复线性渐变,用法同上。
实例设计:
下面实例设计三色重复显示径向渐变,效果如下:
温馨提示:不要久盯此图
代码如下:
完结!!!
作者:在校生记录博客
出处:这里。。。。
只供学习交流!