径向渐变

径向渐变使用 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. android studio 升级到3.3.1后，提示程序包不存在

    android studio 升级到3.3.1后,提示程序包不存在 原因 主Module--A 引用了其他Moduel--B里的jar库, 只需要把B的dependencies改成如下(implent ...

  2. 【转】计算机信息系统安全保护等级划分准则(GB 17859-1999)

    计算机信息系统安全保护等级划分准则(GB 17859-1999) 概述 计算机信息系统安全保护等级划分准则(GB 17859-1999) 1 范围 本标准规定了计算机系统安全保护能力的五个等级,即: ...

  3. 关于使用easyui 中提示dialog is not a function的问题

    我们经常在一些项目使用easyui,当然必不可少都会用到dialog这个功能,但是有时候你会发现: 明明我的代码没有错误,调用的规范按照API的来撰写,但是还有会报 $(...).dialog is ...

  4. 第一节 Python基础之数据类型(整型，布尔值，字符串)

    数据类型是每一种语言的基础,就比如说一支笔,它的墨有可能是红色,有可能是黑色,也有可能是黄色等等,这不同的颜色就会被人用在不同的场景.Python中的数据类型也是一样,比如说我们要描述一个人的年龄:小 ...

  5. Ubuntu14.04+ROS 启动本地摄像头

    STEP1安装usb_cam 创建一个工作空间,make一下 mkdir  -p ~/catkin_ws/src cd ~/catkin_ws/ catkin_make STEP2下面是安装usb_c ...

  6. hibernate left join fetch 出错的问题

    1.首先说说manyToOne的问题 比如一个用户所在的组织机构,可能是多个,最多是四个,然后userEntity有下的代码: 关联查询: 第一种方式:代码如下 StringBuilder sql = ...

  7. Kafka安装及开启SASL_PLAINTEXT认证（用户名和密码认证）

    前些日子要封装一个kafka的客户端驱动,配置了下kafka环境,发现配置复杂度完爆rabbitmq很多倍啊,而且发布订阅模式使用起来也很麻烦,可能就胜在分布式了吧. kafka需要java环境,自行 ...

  8. Linq to SQL -- 入门篇

    一.什么是Linq Linq是语言集成查询(Language Integrated Query)的简称,是visual Studio 2008和.NET Framework 3.5版本中一项突破性的创 ...

  9. Day71Django基础

    Django框架基础一 python中的web框架    a:socket    b:路由跟视图函数匹配关系    c:模板渲染    django:  a: 用了别人的wsgiref   b:自己写 ...

  10. 使用css让动态容器按固定宽高比显示

    需求:页面上有一个div的宽度是随着屏幕宽度的改变而改变的,但其宽高比始终是2:1,也就是当宽度是1000px时,高度为500px 分析:无论浏览器窗口如何改变,始终要让目标元素的宽高比保持2:1,我 ...