CSS3径向渐变-radial-gradient()/repeating-radial-gradient()

径向渐变由它的中心定义。

创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色。同时,你也可以指定渐变中心、形状(圆形或椭圆形)、大小。

默认情况下,渐变的中心是center(表示在中心),渐变的形状是ellipse(表示椭圆形),变天的大小是farthest-corner(表示到最远的角落)

语法:

background: radial-gradient(center, shape size, start-color, ..., last-color);

1.径向渐变-默认情况下,颜色结点均匀分布

    .divOne{
background:radial-gradient(red,green,blue);
}
.divTwo{
background:radial-gradient(red,blue);
width:100px;
}

2.径向渐变-指定形状

    .divOne{
background:radial-gradient(circle,red,blue);
}
.divTwo{
background:radial-gradient(ellipse,red,blue);
}

3.径向渐变-指定位置

.divOne{
/*低版本的Google,也不支持指定中心位置*/
background:radial-gradient( red,green,blue);
background:-webkit-radial-gradient( bottom,red,green,blue);
}
.divTwo{
background:radial-gradient(red,blue);
background:-webkit-radial-gradient(top,red,blue);
width:100px;
}

4.径向渐变-颜色不均匀:

.divOne{
background:radial-gradient(red 10%,green 30%,blue 60%);
}
.divTwo{
background:radial-gradient(red 20%,blue 60%,green 10%);
width:100px;
}

5.径向渐变-大小指定,不同尺寸大小关键字的使用,

size参数定义渐变的大小,,第一个参数是水平方向宽度,第二个参数是垂直方向参数,对应的关键词

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
.divOne {
/*低版本的Google也不支持,需要加前缀*/
background: radial-gradient(60% 30%, closest-side, red, blue);
background: -webkit-radial-gradient(60% 30%, closest-side, red, blue);
}
.divTwo {
background: radial-gradient(60% 30%, farthest-side, red, blue);
background: -webkit-radial-gradient( 60% 30%, farthest-side, red, blue);
}
.divThree {
background: radial-gradient(60% 30%, closest-corner, red, blue);
background: -webkit-radial-gradient( 60% 30%, closest-corner, red, blue);
}
.divFourth {
background: radial-gradient(60% 30%, farthest-corner, red, blue);
background: -webkit-radial-gradient( 60% 30%, farthest-corner, red, blue);
}

6.重复径向渐变-repeating-radial-gradient()

.divOne {
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

更多:

CSS3渐变(Gradients)-线性渐变

Css3渐变(Gradients)-径向渐变的更多相关文章

  1. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  2. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  3. CSS3线性渐变和径向渐变

    background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...

  4. css3 线性渐变和径向渐变

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...

  5. CSS3的radial-gradient(径向渐变)

    所谓径向渐变,如图下,类似光晕 语法: radial-gradient(  [    [渐变大小]?    [ at 渐变圆心坐标]?  ,]?  颜色[ 开始位置]  [,颜色[ 开始位置]]+); ...

  6. css3渐变之径向渐变

    径向渐变由它的中心定义.可以指定渐变的中心.形状(原型或椭圆形).大小.默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthes ...

  7. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  8. CSS3_线性渐变_径向渐变----背景

    渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image background 的诸多属性,渐变都是可以使用的(repeat,position) 百分比: ...

  9. 使用canvas来完成线性渐变和径向渐变的功能

    fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色.   线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数.   第一步 : 使用一个新的函数cre ...

随机推荐

  1. Hibernate 注解多对一 要求在多那边产生一个外键而不会另外产生一个表

    在使用hibernate注解的时候,我们映射一对多时,有时候莫名其妙的产生了两张表,其中一张表是A_B,这并不符合数据库中多的一方放置一个外键的原则,那么如何控制只产生一个表呢,请看下面的例子: 多的 ...

  2. 【HDU4859】 海岸线(网络流-最小割)

    Problem Description 欢迎来到珠海! 由于土地资源越来越紧张,使得许多海滨城市都只能依靠填海来扩展市区以求发展.作为Z市的决策人,在仔细观察了Z市地图之后,你准备通过填充某些海域来扩 ...

  3. 关于Cookie跨域操作的一些总结

    正常的cookie只能在一个应用中共享,即一个cookie只能由创建它的应用获得. 1.可在同一应用服务器内共享方法:设置cookie.setPath("/");     本机to ...

  4. 在linux中使用php将word文档转为pdf

    使用本教程需要在linux中安装openoffice,改页面中有详细的安装与使用教程(http://www.cnblogs.com/sustudy/p/3999628.html). 既然,你看了该教程 ...

  5. LED七彩变色灯的制作

    LED变色灯是一种新型灯泡.它的外形与一般乳白色白炽灯泡相同,但点亮后会自动按一定的时间间隔变色.循环地发出青.黄.绿.紫.蓝.红.白色光.它适用于家庭生日派对.节日聚会.过节过年,给节日添加欢乐气氛 ...

  6. keil 工程中多文件编译时全局变量怎么引用

    由于代码较多时,为了代码的工整以及易读性,往往将代码拆分成模块,并书写头文件.但keil中定义全局变量往往是一件头疼的事情. (1)xx.h文件中基本书写的是管脚定义和函数声明,全局变量不能定义在头文 ...

  7. PHP日常杂记

    1.php点击按钮跳转页面 <input type="button" onclick="window.location.href='login.php'" ...

  8. Java中如何创建进程(转)

    在Java中,可以通过两种方式来创建进程,总共涉及到5个主要的类. 第一种方式是通过Runtime.exec()方法来创建一个进程,第二种方法是通过ProcessBuilder的start方法来创建进 ...

  9. xcode5 ios7升级后的一系列问题解决

    framework not found IOKit解决办法,打开终端:cd /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS. ...

  10. configure: error: cannot find protoc, the Protocol Buffers compiler

    centos 6 安装mosh 1.2 2012-05-07 17:21:41标签:centos mosh 关于mosh(引用于) 芬兰研究员Tatu Ylönen于1995年设计出最早的SSH协议, ...