径向渐变

径向渐变使用 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. Windows Server 2008 R2 /2012 修改密码策略

    今天建了域环境,在添加新用户的时候,发现用简单的密码时域安全策略提示密码复杂度不够,于是我就想在域安全策略里面把密码复杂度降低一点. 问题:    在“管理工具 >> 本地安全策略 > ...

  2. WIMLIB-CAPTURE捕获说明

    WIMLIB-CAPTURE捕获说明1.如果捕获目录Y:\windows,那么[ExclusionList]字段里面不能有\windows,否则什么都不能捕捉,但是可以有下面的子目录例如\window ...

  3. WinHTTrack Website Copier使用说明

    WinHTTrack Website Copier使用说明 WinHTTrack Website Copier可以抓取整个网站或者某个网页.某个论坛帖子.以抓取论坛某个主题帖子为例: 1.打开WinH ...

  4. Apache的ServerAlias的作用

    今天在php的集成环境laragon上添加了一个虚拟主机,域名为:whathell.com 突然想在前面加个www. 一种做法是在auto.whathell.com文件中添加如下内容: <Vir ...

  5. Spring boot 的 properties 属性值配置 application.properties 与 自定义properties

    配置属性值application.properties 文件直接配置: com.ieen.super.name="MDD" 自定义properties文件配置:src/main/r ...

  6. scheduleAtFixedRate 与 scheduleWithFixedDelay 的区别

    总结: scheduleAtFixedRate ,是以上一个任务开始的时间计时,period时间过去后,检测上一个任务是否执行完毕,如果上一个任务执行完毕,则当前任务立即执行,如果上一个任务没有执行完 ...

  7. html 常用button事件

    <input onclick="document.all.WebBrowser.ExecWB(1,1)" type="button" value=&quo ...

  8. vs 为什么使用#include "stdafx.h"

    原因:1.减少编译次数 2.减少不必要的处理 流程图: 这个跟宏定义#ifndef xx #define xx  coding here #endif //xx 区别在于: 宏定义是防止头文件重复包含 ...

  9. abp.net zero 运行报500.21，错误模块AspNetCoreModuleV2

    关于这个运行时提示的问题,导致项目无法运行,之前我是遇到过的,也是查了很久最后解决了 但忘记记录了...岁数大了脑袋不好用了...这次依然找了各种方案,有很多都说由于net core 不是最新的,但我 ...

  10. js生成uuid

    前端不能像java一样有内置的uuid生成包,所以需要自己写一个function,每次调用这个函数都会生成一个不同的字符串,代码如下: getuuid() { var uid = []; var he ...