css3 Gradient渐变效果
来源:互联网 发布:八一建军节军装照软件 编辑:程序博客网 时间:2024/04/30 07:30
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
虽然CSS3的渐变属性在众浏览器中得到较好的支持,但在实际使用的时候也像制作软件(Photoshop CS6、Firework CS6等)的渐变工具一样,将渐变分成了几种:线性渐变(Linear Gradients),径向渐变(Radial Gradients)、重复线性渐变和重复径向渐变。
国外一个根据gradients生产的多种渐变图案
http://lea.verou.me/css3patterns/
一、线性渐变语法与参数
W3C标准线性渐变语法与属性参数
<span style="font-size:14px;">linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)</span>
W3C标准线性渐变属性参数
W3C标准线性渐性语法包括三个主要属性参数:第一个参数指定了渐变的方向,同时决定了渐变颜色的停止位置。这个参数值可以省略,当省略不写的时候其取值为“to bottom”。在决定渐变的方向主要有两种方法:
<angle>:通过角度来确定渐变的方向。0度表示渐变方向从下向上,90度表示渐变方向从左向右。如果取值为下值,其角度按顺时针方向旋转。
<angle>:通过角度来确定渐变的方向。0度表示渐变方向从下向上,90度表示渐变方向从左向右。如果取值为下值,其角度按顺时针方向旋转。
关键词:通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外,还可以使用“top left”左上角到右下角、“top right”左上角到右下解等。
第二个和第三个参数,表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。
一个渐变可以包含多个色标,位置值为0~1之间的小数,或者0~100%之间的百分数,指定色标的位置比例
二、径向渐变语法与参数
W3C标准径向渐变语法
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
属性作用参数shap渐变形状ellipse(椭圆渐变) circle(圆形渐变)size渐变尺寸closest-side:渐变半径最近的边;
closest-corner:渐变半径最近的角;
farthest-side:渐变半径最远的边;
farthest-corner:渐变半径最远的角;
主要半径 次要半径(水平半径 垂直半径)【可以为数值或者百分比】position渐变原点,即渐变圆心位置关键字
长度
百分比
closest-corner:渐变半径最近的角;
farthest-side:渐变半径最远的边;
farthest-corner:渐变半径最远的角;
主要半径 次要半径(水平半径 垂直半径)【可以为数值或者百分比】position渐变原点,即渐变圆心位置关键字
长度
百分比
径向渐变的属性参数
<position>:主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性,用于确定元素渐变的中心位置。如果这个参数省略了,其默认值为“center”。其值主要有以下几种:
- <length>:用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
- <percentage>:用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
- left:设置左边为径向渐变圆心的横坐标值。
- center:设置中间为径向渐变圆心的横坐标值或纵坐标。
- right:设置右边为径向渐变圆心的横坐标值。
- top:设置顶部为径向渐变圆心的纵标值。
- bottom:设置底部为径向渐变圆心的纵标值。
<shape>:主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”:
- circle:如果<size>和<length>大小相等,那么径向渐变是一个圆形,也就是用来指定圆形的径向渐变
- ellipse:如果<size>和<length>大小不相等,那么径向渐变是一个椭圆形,也就是用来指定椭圆形的径向渐变。
<size>:主要用来确定径向渐变的结束形状大小。如果省略了,其默认值为“farthest-corner”。可以给其显式的设置一些关键词,主要有:
- closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;
- closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;
- farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;
- farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;
如果<shape>设置了为“circle”或者省略,<size>可能显式设置为<length>。表示的是用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。
主要半径 次要半径(主要半径即水平半径,次要半径为垂直半径)
如果<shape>设置了“ellipse”或者省略,<size>可能显式设置为[<length>|<percentage>]。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径,第二个值代表垂直半径。这两个值除了使用<length>定义大小之外还可以使用<percentage>来定义这两半径大小。使用<percentage>定义值是相对于径向渐变容器的尺寸。同样不能为负值。
<color-stop>:径向渐变线上的停止颜色,类似于线性渐变的<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点,100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。
三、重复渐变
重复线性渐变
重复径向渐变
0 0
- css3 Gradient渐变效果
- Gradient─CSS3渐变
- Css3: gradient背景渐变
- CSS3之渐变Gradient
- CSS3 Gradient 渐变
- CSS3 颜色渐变 gradient
- css3 渐变色彩(Gradient)
- css3 gradient 渐变使用
- Gradient─CSS3渐变
- css3中的gradient渐变
- CSS3 Gradient渐变
- linear-gradient和radial-gradient属性——css3渐变效果
- CSS渐变之CSS3 gradient
- css3 radial-gradient 径向渐变
- CSS3——gradient渐变
- CSS3:渐变(gradient)用法详解
- CSS3径向渐变(radial-gradient)
- CSS3 线性渐变 linear-gradient
- [软件人生]关于我,我的未来,我的思考
- spring常用注解
- mysql 函数说明
- javaweb学习总结(三十六)——使用JDBC进行批处理
- 【报错】HibernateException:hibernate.cfg.xml not found
- css3 Gradient渐变效果
- 四级联动下拉菜单
- java安全框架-Shiro学习笔记(七)-自定义realm
- Jmeter 中使用Beanshell来引用第三方jar包
- 相似性度量--Pearson相关系数
- javaweb学习总结(三十七)——获得MySQL数据库自动生成的主键
- [LC347] Top K Frequent Elements
- ios各种第三方控件
- 映射关系级别注解