CSS 图像高级 径向渐变

时间：2022-10-12 09:50:26

径向渐变

径向渐变使用 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径向渐变&lpar;CSS3--Gradient&rpar;

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

  5. CSS3渐变——径向渐变

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

  6. CSS3背景渐变属性 linear-gradient&lpar;线性渐变&rpar;和radial-gradient&lpar;径向渐变&rpar;

    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. DLL组件注册器

    在实际程序运行中,尤其是绿色软件,都需要对DLL进行注册才能够使用.下面就是笔者开发的一款简单的DLL注册器. http://pan.baidu.com/s/1mhbrN1e

  2. Jenkins创建Maven项目及SSH部署

    前面我们已经安装了Jenkins的环境,以及配置好了jdk和maven.下面我们来看如何通过Jenkins将svn的项目进行打包和部署. 创建MAVEN项目 1.点击新建,输入项目名,选择" ...

  3. Android音频开发之AudioTrack实时播放

    前言: 其实在Android中录音可以用MediaRecord录音,操作比较简单.但是不能对音频进行处理.考虑到项目中做的是实时语音只能选择AudioRecord进行录音.然后实时播放也只能采用Aud ...

  4. jenkins2 Jenkinsfile和load

    更复杂的pipeline实例,使用了Jenkinsfile和load. 文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.c ...

  5. Http 协议Header

    Responses 部分 Header 解释 示例 Accept-Ranges 表明服务器是否支持指定范围请求及哪种类型的分段请求 Accept-Ranges: bytes Age 从原始服务器到代理 ...

  6. Java Zip压缩实现

    最近在自学javaWeb,先复习一下java,把还给老师的东西再找回来(知识如果不用很快就会忘记啊).. 今天看到了zip压缩,决定要整理一下. java将有关zip压缩的内容都封装在java.uti ...

  7. LRU算法实现

    JDK中的实现 在JDK中LinkedHashMap可以作为LRU算法以及插入顺序的实现,LinkedHashMap继承自HashMap,底层结合hash表和双向链表,元素的插入和查询等操作通过计算h ...

  8. JavaScript&colon; top对象

    一般的JS书里都会在讲框架集的时候讲top,这会让人误解,认为top对象只是代表框架集,其实top的含义应该是说浏览器直接包含的那一个页面对象,也就是说如果你有一个页面被其他页面以iframe的方式包 ...

  9. JavaScrpt笔记之第二天

    JavaScript正则表达式regex 1.郑则表达式是有一个字符序列形成的搜索模式. *语法:/正则表达式主题/修饰符(可选) *正则表达式修饰符:i部分大小写:g全局搜索:m多行匹配 *[abc ...

  10. ubuntu14静态ip配置

    0.配置ip需要掌握的一些基本指令 打开/创建文件      sudo vim ... 插入信息      i 保存并强制退出      先按Esc,再键入:wq!,回车 1.使用命令 sudo vi ...

相关文章