描述
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. JDBC---Mysql(2)

    SQL注入攻击: 用户可以提交一段数据库查询代码,根据程序返回的结果,获得某些他想知道的数据,这就是所谓的SQL注入攻击, 例如:判断username='a' or 'a'='a';  true从而为 ...

  2. kafka读书笔记《kafka权威指南》2018

    1.有了分区,可以多个client消费一个topic,有了分区,可以将一个topic 分散在多个broker 2.kafka通过复制实现可靠,通过横向扩展提高性能(如增加分区.客户端.增加broker ...

  3. MovieLens电影数据分析

    下载数据包 链接:https://grouplens.org/datasets/movielens/1m/ 解压: 四个文件分别是数据介绍,电影数据表,电影评分表,用户表 进行电影数据分析 进入ipy ...

  4. eclipse debug调试时老是被URLClassLoader这个类拦截到,不能进入到要调试的类里面去

    在使用eclipse进行试的时候,一直进入到URLClassLoader,而不能正常的进入断点,后来经过查资料,解决方法如下: 上面是百度给出的答案,我把图贴在这里,以便以后其他组的朋友遇到这个问题的 ...

  5. mysql 数据库操作 数据库的增删改查

    一 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MyS ...

  6. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  7. Python3学习之路~8.3 socket 服务端与客户端

    通过8.2的实例1-6,我们可以总结出来,socket的服务端和客户端的一般建立步骤: 服务端 步骤:1创建实例,2绑定,3监听,4阻塞,5发送&接收数据,6关闭. #Author:Zheng ...

  8. python基础(9)-迭代器&生成器函数&生成器进阶&推导式

    迭代器 可迭代协议和迭代器协议 可迭代协议 只要含有__iter__方法的对象都是可迭代的 迭代器协议 内部含有__next__和__iter__方法的就是迭代器 关系 1.可以被for循环的都是可迭 ...

  9. oracle添加字段,备注

    1.添加字段: alter table  表名  add (字段  字段类型)  [ default  '输入默认值']  [null/not null]  ; 2.添加备注: comment on ...

  10. bcolz的新操作

    1.直接修改 eg:把data.bcolz文件中A列为0的数据填充为1000. data = bcolz.open("data.bcolz", "a") #以& ...