前面的话

  上篇介绍了线性渐变,本文接着介绍径向渐变的内容

定义

  径向渐变,实际上就是椭圆渐变,圆只是一种特殊的椭圆而已。径向渐变从圆心点以椭圆形状向外扩散,渐变的实现由两部分组成:椭圆和色标。椭圆部分用来控制径向渐变的位置、大小和形状等。而色标部分包含一个颜色值和一个位置,用来控制渐变的颜色变化

  [注意]safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变,且需要添加-webkit-;safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变,且需要添加-webkit-;IE10+及其他高版本浏览器支持标准写法

//标准写法
radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
//-webkit-老版本径向渐变的写法
-webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+)

椭圆

  径向渐变方式主要由<position>、<shape>、<size>这三个参数影响,分别控制椭圆的圆心、形状和大小

position

   定义渐变的圆心,默认是center center

<position>: x轴 y轴
x轴:<length> | <percentage> | left | center | right
y轴:<length> | <percentage> | top | center | bottom

  [注意]和线性渐变类似,旧版本-webkit-内核浏览器并不支持at <position>的写法,只支持<position>的写法

【1】关键字

x轴
left: % center: % right: %
y轴
top: % center: % bottom: %

【2】数值

  x轴数值表示在x轴上离0点(渐变框左上角)的偏移量;y轴数值表示在y轴上离0点的偏移量

【3】百分比

  其中x轴的百分比相对于渐变框的宽度,而y轴的百分比相对于渐变框的高度。渐变框的宽高由background-size决定

【4】单个值

  当只有一个值时,默认第二个值为center

shape

  定义渐变的形状是圆circle或椭圆ellipse。默认是椭圆

<shape>: circle | ellipse

size

  定义渐变的大小。默认是farthest-corner

【1】关键字

<size>: closest-side | closest-corner | farthest-side | farthest-corner
closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-side:半径为从圆心到最远角

//左上为最近角,右上为最近边;左下为最远角,右下为最远边

【2】圆

  如果<shape>是circle,则<size>可以设置为<length>,表示直径,0%表示圆心,100%表示距离圆心为半径的点

  [注意]不能为负值也不可以设置百分比

  [注意]webkit内核浏览器支持使用CSS设置圆的<length>型的<size>,但并不支持javascript改变其值;对于safari浏览器来说,只有半径写在circle关键字前面才识别

//以下DEMO只有IE10+及firefox可以正常运行

【3】椭圆

  如果<shape>是ellipse或不设置时,则<size>可以设置为<length>或<percentage>,第一个值表示水平直径,第二个值表示垂直直径。百分比相对于径向渐变容器的尺寸

  [注意]若只有一个值,则表示水平和垂直直径相同,因为圆是特殊的椭圆,所以一个值时不可以为百分比

  [注意]和圆类似,<size>值不能为负值,因为其表示的是直径

  [重要]由于webkit浏览器在使用circle或ellipse关键字时渲染不正常,所以若使用circle时,可以不写shape(默认为ellipse),用水平和垂直直径相同的椭圆替代

色标

  与线性渐变的色标相同的部分不再重复,这里只说明不同的部分。由于位置处于100%的色标有时并不会占满渐变区域,则浏览器会默认使用最后一个色标的颜色铺满渐变区域

<color-stop> = <color> [ <percentage> | <length> ]?

重复渐变

  重复渐变可以实现径向渐变的重复效果,使色标在椭圆方向上无限重复,实现一些特殊的效果

  [注意]只有当首尾两颜色位置不在0%或100%时,重复渐变才生效

background-image: -webkit-repeating-radial-gradient(blue %,green %);
background-image: repeating-radial-gradient(blue %,green %);

其他

  关于线性渐变的多背景应用场景,径向渐变与之类似。但径向渐变无法实现IE兼容。

深入理解CSS径向渐变radial-gradient的更多相关文章

  1. 纯css径向渐变(CSS3--Gradient)

    渐变 一.CSS3的径向渐变 效果图网址:http://www.spritecow.com 图像拼接技术 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gra ...

  2. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  3. CSS径向渐变radial-gradient

    可以做一些效果,不错! 网址:http://www.cnblogs.com/xiaohuochai/p/5383285.html

  4. 前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odKrpy 可交互视频教程 此视频 ...

  5. css 径向渐变

    .example { width: 150px; height: 80px; background: -webkit-radial-gradient(red, green, blue); /* Saf ...

  6. HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. CSS3之径向渐变

        设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...

  8. CSS 图像高级 径向渐变

    径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...

  9. CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...

随机推荐

  1. [转]c++中vector的使用

    C++中的vector使用范例 一.概述 vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector是一个容器,它能够存放各种类型的对象,简 ...

  2. C/C++头文件一览

    C.传统 C++ #include <assert.h> //设定插入点 #include <ctype.h> //字符处理 #include <errno.h> ...

  3. mysql 存储过程 死循环,如何关闭

    如果误操作  ,存储过程中出现了死循环怎么办?删除存储过程是不能解决问题的. 解决方法, 1,打开mysql客户端,在查询窗口中执行: show processlist; 2,查询到自己的那个进程   ...

  4. 移动端web开发 问题

    1.APP 返回按钮 <a href='#' onclick='javascript:history.back(-1);'></a> 返回有问题需要使用 href='javas ...

  5. Inno Setup 下载安装

    Inno Setup 是一个免费的 Windows 安装程序制作软件.第一次发表是在 1997 年,Inno Setup 今天在功能设置和稳定性上的竞争力可能已经超过一些商业的安装程序制作软件. 目前 ...

  6. HTML5-块元素标签的使用

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. dbca静默建库和删除库

    dbca查看帮助: [oracle@wen ~]$ dbca -help 1).运行静默建库语句 [oracle@wen ~]$ dbca -silent -cloneTemplate -gdbNam ...

  8. 用python实现,冒泡排序演示

    # -*- coding:utf-8 -*- import time from Tkinter import * a=[1,9,5,6,8,1] class CanvasDemo(): #n1=70 ...

  9. 解剖SQLSERVER 第三篇 数据类型的实现(译)

    解剖SQLSERVER 第三篇  数据类型的实现(译) http://improve.dk/implementing-data-types-in-orcamdf/ 实现对SQLSERVER数据类型的解 ...

  10. Ubuntu 下安装Mysql 需要注意的地方.

    安装卸载 sudo apt-get autoremove --purge mysql-server-5.0sudo apt-get remove mysql-serversudo apt-get au ...