<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            width: 210px;

            height: 50px;

            float: left;

            margin: 10px;

        }

        .one {

            background: linear-gradient(to right bottom, red, blue 70px);

        }

        .two {

            background: linear-gradient(190deg, #000, #FFF);

        }

        .three {

            background: linear-gradient(red, green, blue);

        }

        .four {

            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            width: 210px;

            height: 100px;

            float: left;

            margin: 10px;

            border: 1px solid black;

        }

        .one {

            background: radial-gradient(circle at 50%, red, yellow, lime);

        }

        .two {

            background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);

        }

        .three {

            background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);

        }

        .four {

            background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            width: 210px;

            height: 100px;

            float: left;

            margin: 10px;

            border: 1px solid black;

        }

        .one {

            background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);

        }

       .two {

            background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);

        }

        .three {

            background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);

        }

        .four {

            background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            width: 210px;

            height: 100px;

            float: left;

            margin: 10px;

            border: 1px solid black;

        }

        .one {

            background: repeating-linear-gradient(190deg, #000 0px 10px, #FFF 10px 20px);

        }

       .two {

            background: repeating-radial-gradient(circle 100px at 50%, red 0% 10%, yellow 10% 30%, lime 30% 40%);

        }

        .three {

            background: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);

        }

        .four {

            background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

</body>

</html>

CSS——渐变色的更多相关文章

  1. 兼容主流浏览器的css渐变色

    网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE .Firefox.Chrome 和 和Safari都支持的 ...

  2. CSS渐变色边框，解决border设置渐变后，border-radius无效的问题

    需求:用css设置渐变边框通过border-image来实现渐变色边框 <div class="content"></div> .content { wid ...

  3. css渐变色DIV

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. css渐变色

    <!DOCTYPE html><html><head> <meta http-equiv="content-type" content=& ...

  5. CSS 渐变色

    CSS linear-gradient() 函数 http://www.runoob.com/cssref/func-linear-gradient.html CSS radial-gradient( ...

  6. css渐变色兼容性写法

    background: -webkit-linear-gradient(left, #0f0f0f, #0c0c0c, #272727); /* Safari 5.1 - 6.0 */ backgro ...

  7. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  8. AI & HR

    AI & HR 数字化人才画像 人力资本数字化管理 通过"AI+数据+专家"的手段,将"数字化人才画像"作为服务起点与信息入口,扩展提供全场景的数字化人 ...

  9. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  10. css文字和背景色渐变色

    定义一个div: <div class="shop-title" >上海迪士尼度假区官方旗舰店</div> 使用css: .shop-title{ widt ...

随机推荐

  1. Mysql之innodb架构

    Innodb存储引擎的架构 内存结构 Bufer Pool 缓冲池是主内存中的一个区域,里面可以缓存磁盘上经常操作的真实数据,在执行增删改查操作时,先操作缓冲池中的数据(若缓冲池没有数据,则从磁盘加载 ...

  2. 当年老夫手写的cookie

    前言 留来来只为了回忆,旧博客迁移. 正文 /** * Created by OC on 20xx/8/27. */ function setCookie(name,value,expires,pat ...

  3. Java使用ganymed工具包执行LINUX命令教程

    了解更多开发技巧,请访问,架构师小跟班官网:https://www.jiagou1216.compackage com.jiagou;import ch.ethz.ssh2.Connection;im ...

  4. javascript现代编程系列教程之三——数值表示方式

    在64位浮点数的表示中,我们使用了一个叫做"偏移二进制"的技术来存储指数.这是因为我们需要在有限的位数(在这种情况下是11位)内表示正数和负数. 让我们更详细地解释一下: 符号位: ...

  5. Java面试题：为什么HashMap不建议使用对象作为Key?

    HashMap 是一种基于哈希表的动态数据结构,它允许使用任意不可变对象作为键(key)来存储和检索数据.然而,在某些情况下,使用对象作为 HashMap 的键可能会遇到一些问题. 首先,我们需要明确 ...

  6. Linux命令之查找CPU资源利用情况（lscpu和top详解）

    1.lscpu命令:获取CPU架构完整详细信息,例如架构信息,CPU模式,CPU频率,CPU核心数.线程数.缓存大小. 在终端输入"lscpu": 参数详解: [Architect ...

  7. 第 10 章 使用pyecharts 进行数据展示

    第 10 章 使用pyecharts 进行数据展示 10.1 安装 pyecharts pyecharts 是一个用于生成 Echarts 图表的类库, Echarts 是百度开源的一个数据可视化JS ...

  8. HarmonyOS NEXT应用开发案例——阻塞事件冒泡

    介绍 本示例主要介绍在点击事件中,子组件enabled属性设置为false的时候,如何解决点击子组件模块区域会触发父组件的点击事件问题:以及触摸事件中当子组件触发触摸事件的时候,父组件如果设置触摸事件 ...

  9. 揭秘阿里云神龙团队拿下TPCx-BB排名第一的背后技术

    ​简介:阿里云自主研发的神龙大数据加速引擎获得了TPCx-BB SF3000世界排名第一的成绩. ​ 一  背景介绍 近日,TPC Benchmark Express-BigBench(简称TPCx- ...

  10. 什么是好的错误消息? 讨论一下Java系统中的错误码设计

    简介:一个好的Error Message主要包含三个部分:Context: 什么导致了错误?发生错误的时候代码想做什么?The error itself: 到底是什么导致了失败?具体的原因和当时的数据 ...