描述
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. 这就是使用ReportBuilder最简单的例子

    用这组控件最简单的例子:在窗体上放上组件名为ppBDEPipeline1,ppReport1,ppDesigner1,ppViewer1,DataSource1的控件,设置ppreport1的data ...

  2. ubuntu物理机上搭建Kubernetes集群 -- master 配置

    1. 将  kube-apiserver, kube-controller-manager, kube-scheduler,kubectl 拷贝到/usr/bin目录下 2. 安装etcd sudo ...

  3. unittest框架assert断言

    Pthon内部自带了一个单元测试的模块,\ pyUnit也就是:unittest 先介绍下unittest的基本使用方法: 1.import unittest2.定义一个继承自unittest.Tes ...

  4. 【python基础】利用pandas处理Excel数据

    参考:https://www.cnblogs.com/liulinghua90/p/9935642.html 一.安装第三方库xlrd和pandas 1:pandas依赖处理Excel的xlrd模块, ...

  5. Redis和Memcache的区别是什么

    Redis和Memcache都是内存数据库,但它们之间还是有区别的,跟着ytkah看看Redis和Memcache的区别吧 Redis 支持多种数据结构,如string,list,dict,set,z ...

  6. MySQL 5.7 Replication 相关新功能说明 (转)

    背景: MySQL5.7在主从复制上面相对之前版本多了一些新特性,包括多源复制.基于组提交的并行复制.在线修改Replication Filter.GTID增强.半同步复制增强等.因为都是和复制相关, ...

  7. 回文字符串 NYOJ

    # include<iostream> # include<string> # include<string.h> # include<queue> # ...

  8. Java中的字段和属性

    Java中的属性,通常可以理解为get和set方法.而字段,通常叫做“类成员”. 属性只局限于类中方法的声明,并不与类中其他成员相关.例如:void setA(String s){}String ge ...

  9. golang 与 c语言 之间传递指针的规则提案

    https://go.googlesource.com/proposal/+/master/design/12416-cgo-pointers.md https://github.com/golang ...

  10. echarts 实现tooltip双栏效果

    实现效果如下: 代码: //option tooltip: { trigger: 'axis', axisPointer: { label: { show: true, fontSize: 15 } ...