径向渐变

径向渐变使用 radial-gradient 函数语法。

这个语法和线性渐变很类似， 可以指定渐变结束时的形状 以及它的大小。

默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。

下面代码演示径向渐变的用法：

<!DOCTYPE html>
<html>
    <head>
        <title>径向渐变</title>
        <style type="text/css">
            body{
                padding:20px;
            }
            div{color:#fff;}
            div.one{
                width:150px;
                height:150px;
                border:1px solid #000;
                background: radial-gradient(red, blue, rgb(30, 144, 255)); 
            }
            div.two{
                width:150px;
                height:150px;
                border:1px solid #000;
                background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
            }  
            div.three{
                width:150px;
                height:150px;
                border:1px solid #000;
                background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
            }
            div.four{
                width:150px;
                height:150px;
                border:1px solid #000;
                background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
            }          
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>
 

工作中可以使用渐变生成工具，提高工作效率。

http://www.colorzilla.com/gradient-editor/

CSS 图像高级 径向渐变的更多相关文章

  1. CSS 图像高级 CSS 渐变

    CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.用渐变代替图片,可以加快页面 ...

  2. CSS 图像高级 Css Sprites

    上节课中我们学习了背景图像,这节课我们学习背景图像的高级知识,如Css Sprites,CSS 背景渐变等. Css Sprites Css Sprites,国内也叫CSS精灵.它的原理是将许多的小图 ...

  3. 深入理解CSS径向渐变radial-gradient

    × 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐 ...

  4. 纯css径向渐变(CSS3--Gradient)

    渐变 一.CSS3的径向渐变 效果图网址:http://www.spritecow.com 图像拼接技术 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gra ...

  5. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  6. CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...

  7. css3 线性渐变和径向渐变

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...

  8. CSS3技巧：利用css3径向渐变做一张优惠券（转）

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  9. canvas径向渐变详解

    创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

随机推荐

  1. python随机数学习笔记

    #coding:utf-8 import random # random.randint(1,10)产生1,10的随机整数 for i in range(1,5): ranint = random.r ...

  2. ELK实践-Kibana定制化扩展

    纵观任何一家大数据平台的技术架构,总少不了ElasticSearch:ES作为溶合了后端存储.快速检索.OLAP分析等功能的一套开源组件,更绝的是提供了一套集数据采集与前端展现为一体的框架(即ELK) ...

  3. LINUX系统软件安装和卸载的常见方法

    linux系统分很多种简单介绍几种常用的: 1.centos/redhat: 安装: rpm安装,如果有依赖,很闹心,如果使用--nodeps不检查依赖,会有问题. #rpm -ivh <XXX ...

  4. Win7下，nginx默认80端口被System占用，造成nginx启动报错

    在win7 32位旗舰版下,启动1.0.8版本nginx,显示如下错误: 2012/04/02 13:55:59 [emerg] 7864#2376: bind() to 0.0.0.0:80 fai ...

  5. python用字符串调用当前模块内的函数

    eval(字符串)() vars()[字符串]() 例如:

  6. 在思科模拟器上配置AAA认证

    1.实验拓扑 2.检测用户之间连通性 PC2 ping PC-A PC-C  ping   PC-A 3.路由及服务器配置 R1:在路由器R1上配置一个本地用户账号并且利用本地AAA通过console ...

  7. 微软 workflow 工作流总结2

    1.公共的状态机工作流 书签的设置 可以在判断模块中的action中赋值,因为在action中肯定要进入到下一个书签,所以可以在此给书签name赋值

  8. Docker学习系列之一——安装篇

    一.目的 Docker是目前非常流行的虚拟技术,在云计算领域得到了广泛的应用.国内的阿里.京东等大厂都非常普遍地应用了Docker.本文记录了Docker的基本安装过程及最终运行结果,以期备忘,及和同 ...

  9. windows下获取文件描述

    一 背景 前几天, 在公司写的获取文件描述的一段小程序出现了点小问题, 对于一般文件是正常的, 对于win10 C:\Program Files\WindowsApps目录下的通用程序,就是死活获取不 ...

  10. 深度学习（一）——CNN算法流程

    深度学习(一)——CNN(卷积神经网络)算法流程 参考:http://dataunion.org/11692.html 0 引言 20世纪60年代,Hubel和Wiesel在研究猫脑皮层中用于局部敏感 ...