Css3渐变(Gradients)-径向渐变
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)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- CSS3线性渐变和径向渐变
background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...
- css3 线性渐变和径向渐变
线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...
- CSS3的radial-gradient(径向渐变)
所谓径向渐变,如图下,类似光晕 语法: radial-gradient( [ [渐变大小]? [ at 渐变圆心坐标]? ,]? 颜色[ 开始位置] [,颜色[ 开始位置]]+); ...
- css3渐变之径向渐变
径向渐变由它的中心定义.可以指定渐变的中心.形状(原型或椭圆形).大小.默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthes ...
- Canvas使用渐变之-径向渐变详解
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1) 一共六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
- CSS3_线性渐变_径向渐变----背景
渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image background 的诸多属性,渐变都是可以使用的(repeat,position) 百分比: ...
- 使用canvas来完成线性渐变和径向渐变的功能
fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色. 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数. 第一步 : 使用一个新的函数cre ...
随机推荐
- Hibernate 注解多对一 要求在多那边产生一个外键而不会另外产生一个表
在使用hibernate注解的时候,我们映射一对多时,有时候莫名其妙的产生了两张表,其中一张表是A_B,这并不符合数据库中多的一方放置一个外键的原则,那么如何控制只产生一个表呢,请看下面的例子: 多的 ...
- 【HDU4859】 海岸线(网络流-最小割)
Problem Description 欢迎来到珠海! 由于土地资源越来越紧张,使得许多海滨城市都只能依靠填海来扩展市区以求发展.作为Z市的决策人,在仔细观察了Z市地图之后,你准备通过填充某些海域来扩 ...
- 关于Cookie跨域操作的一些总结
正常的cookie只能在一个应用中共享,即一个cookie只能由创建它的应用获得. 1.可在同一应用服务器内共享方法:设置cookie.setPath("/"); 本机to ...
- 在linux中使用php将word文档转为pdf
使用本教程需要在linux中安装openoffice,改页面中有详细的安装与使用教程(http://www.cnblogs.com/sustudy/p/3999628.html). 既然,你看了该教程 ...
- LED七彩变色灯的制作
LED变色灯是一种新型灯泡.它的外形与一般乳白色白炽灯泡相同,但点亮后会自动按一定的时间间隔变色.循环地发出青.黄.绿.紫.蓝.红.白色光.它适用于家庭生日派对.节日聚会.过节过年,给节日添加欢乐气氛 ...
- keil 工程中多文件编译时全局变量怎么引用
由于代码较多时,为了代码的工整以及易读性,往往将代码拆分成模块,并书写头文件.但keil中定义全局变量往往是一件头疼的事情. (1)xx.h文件中基本书写的是管脚定义和函数声明,全局变量不能定义在头文 ...
- PHP日常杂记
1.php点击按钮跳转页面 <input type="button" onclick="window.location.href='login.php'" ...
- Java中如何创建进程(转)
在Java中,可以通过两种方式来创建进程,总共涉及到5个主要的类. 第一种方式是通过Runtime.exec()方法来创建一个进程,第二种方法是通过ProcessBuilder的start方法来创建进 ...
- xcode5 ios7升级后的一系列问题解决
framework not found IOKit解决办法,打开终端:cd /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS. ...
- 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协议, ...