描述
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. iOS开发使用pdf切图

    把pdf资源拖到Assets.xcassets里面, 打开最右边的按钮, scales选择single scale就可以像以前一样使用了:  [UIImage imageName:@"xxx ...

  2. DBCHART直方图顶端显示数字

    双击DBCHART-->选SERIES选项卡-->选MARKS-->选STYLE值为VALUE

  3. 【转】escape()、encodeURI()、encodeURIComponent()区别详解

    escape().encodeURI().encodeURIComponent()区别详解 原文链接:http://www.cnblogs.com/tylerdonet/p/3483836.html ...

  4. EF-CodeFirst-基础

    什么是Code-First Code-First主要用于领域驱动设计.在Code-First方法中,专注于应用程序的域,先开始为域实体创建类,而不是先设计数据库,然后创建与数据库设计相匹配的类.下图说 ...

  5. LeetCode 461 Hamming Distance 解题报告

    题目要求 The Hamming distance between two integers is the number of positions at which the corresponding ...

  6. 《linux 计划任务》- cron

    一:什么是计划任务 - 你给手机定了一个闹钟,每天的 7:00 会准时响铃叫你起床,这实际上就是一个计划任务 - 所谓定时任务,就是在已经定好的特定时间去执行的事情. - Cron是一个[守护程序]用 ...

  7. Numpy 机器学习三剑客之Numpy

    NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机 ...

  8. winform版的dota改键器

    从网上找的源码很不齐全,自己补充了一下,有兴趣的可以看看. 首先是建立一个hook类WFChangeKey using System; using System.Reflection; using S ...

  9. what's the python之自定义模块和包

    模块自定义 上节说了有关模块的知识,当时所说的模块都是内置模块,现在来看自己定制的模块,即模块也可以自定义. 模块的自定义就是指写一段python文件,一般情况下里面包含了可执行的语句和函数的定义,其 ...

  10. jQuery-velocity.js 插件的简易使用

    初识Velocity动画,感觉它并没有那么强大,但是渐渐感觉它的ui动画可以让我们简易的使用到我们的项目中. Velocity动画的简介: 下载地址:http://www.julian.com/res ...