描述
shape 确定圆的类型:

  • ellipse (默认): 指定椭圆形的径向渐变。
  • circle :指定圆形的径向渐变
size 定义渐变的大小,可能值:

  • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
  • closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
position 定义渐变的位置。可能值:

  • center(默认):设置中间为径向渐变圆心的纵坐标值。
  • top:设置顶部为径向渐变圆心的纵坐标值。
  • bottom:设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color 用于指定渐变的起止颜色。

这里bia一段项目中

  /* http://www.colorzilla.com/gradient-editor/ */
/*你可以直接使用这个网站生成代码呢*/
background: #000; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #444 0%, #000000 90%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444),
color-stop(90%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #444 0%,#000000 90%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #444 0%,#000000 90%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #444 0%,#000000 90%); /* IE10+ */
background: radial-gradient(ellipse at center, #444 0%,#000000 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#000000',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */

  

CSS radial-gradient() 函数实现渐变的更多相关文章

  1. 【css】gradient匹配ps渐变叠加效果

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 一.linear-gradient(线性渐变) eg:background: l ...

  2. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  3. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  4. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  5. css text gradient color, css fonts gradient color

    css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...

  6. css奇技淫巧-色彩渐变与动态渐变

    来源 css渐变 CSS 中设置的渐变是 gradient 数据类型,它是一种特别的image数据类型.使用background-image设置,可叠加设置多个: CSS3 定义了两种类型的渐变(gr ...

  7. 通过CSS实现的html背景色渐变

    实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. jQuery CSS 的操作函数

    jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

  9. css中var函数

    引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...

随机推荐

  1. 抽屉之Tornado实战(7)--form表单验证

    在这里,我们把form表单验证的代码进行工具化了,以后稍微修改一下参数就可以拿来用了 先贴上代码 forms.py from backend.form import fields class Base ...

  2. mysql工具Navicat Premium使用

    1.连接:打开Navicat, 连接mysql(此处localhost连接),(配置相应端口号用户名密码等) 2.创建数据库:右键localhost选择新建数据库,输入数据库名:struts_tuto ...

  3. pandas基础

    1.相关库导入 2.创建数据结构 pandas 有两个重要的数据结构: Series 和 DataFrame 创建Series数组,代表一行或一列 创建DataFrame ,代表二维数组 第一种方式: ...

  4. linux 系统中 /etc/passwd 和 /etc/shadow文件详解

    链接地址:http://blog.csdn.net/yaofeino1/article/details/54616440

  5. 【socket-python应用】控制泓格ET-7044通信模块输入DI输出DO

    socket-python应用:控制泓格ET-7044通信模块输入DI输出DO 本节主要内容: 1.socket-python建立TCP通信 2.配合泓格通信模块说明书,查看输入输出寄存器地址,发送指 ...

  6. es6学习一 promise上

    简单来说promise在异步操作上提供可读性.(原来es5的异步操作可读性实在太糟糕了,如下图) 瞬间眼前百万只奔腾的马,只不过这种马有个别名,羊驼. 一.创建形式 1. 使用的基本形式: let p ...

  7. MySQL 5.7 传统复制到GTID在线切换

    来源:http://wubx.net/ 联系方式: wubingxi#163.com 转载请注明作/译者和出处,并且不能用于商业用途,违者必究. 前题: 要求MySQL 5.7.6及以后版本. 所有组 ...

  8. 【PCA】周志华

    一.书籍

  9. 导出Excel(导出一个模版)

    有时,客户需要一个标准的模板来填东西,然后在导入 这时可以弄好excel模板,供导出 /** * 导出excel模板文件 * @param request * @param response * @r ...

  10. ORM表操作

    1.在python脚本中调用django环境 在根文件夹下,创建test.py文件 import os if __name__ == '__main__': os.environ.setdefault ...