描述
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. mysql学习【第3篇】:使用DQL查询数据

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第3篇]:使用DQL查询数据 DQL语言 DQL( Data Query Lan ...

  2. es基本查询相关的

    一.获取索引的mapping GET linewell_assets_mgt_es/lw_devices/_mapping

  3. 20165336 2017-2018-2 《Java程序设计》第1周学习总结

    20165336 2017-2018-2 <Java程序设计>第1周学习总结 教材学习内容总结 Java地位.特点:Java具有面向对象.与平台无关.安全.稳定和多线程等优良特性.Java ...

  4. SQL优化之踩过的坑【一】

    正看资料看的过瘾,突然收到报警,说服务器负载太高,好吧,登录服务器看看,我擦嘞,还能不能愉快的玩耍了?下面是当时的负载情况 看见mysql使用cpu已经到了2000,io没有等待.说明应该没有大的临时 ...

  5. InnoDB master thread学习

    很久很久没有写博客了,工作比较忙,也没什么时间学习了,恰逢国庆放假,安心的学习一下,其实只是把之前学习过的知识再温习了一下而已.InnoDB 有众多的线程,其中非常核心的就是master thread ...

  6. 报错解决——Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico文件找不到

    Django项目开发完成后在本地运行没问题,但在推到服务器上后出现报错Failed to load resource: the server responded with a status of 40 ...

  7. 各大知名区块链交易所链接及API文档链接

    区块链交易所链接 火币网(Huobi):https://www.huobi.br.com/zh-cn/ API文档:https://github.com/huobiapi/API_Docs/wiki ...

  8. vue 动态绑定背景图片

    html <div class="racetm" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverIm ...

  9. 【4】axios 获取数据

    API:https://www.kancloud.cn/yunye/axios/234845 基于axios进行二次封装 安装axios npm install axios --save 安装成功 [ ...

  10. PHP MYSQL 临时表的使用

    /** * 临时表:用于获取爱鸽登录分类数量 */ $temporaryTableName = uniqid('temporary_'); $model = M(); $model->execu ...