<!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. Kubernetes Pod配置：从基础到高级实战技巧

    本文深入探讨了Kubernetes Pod配置的实战技巧和常见易错点. 关注[TechLeadCloud],分享互联网架构.云服务技术的全维度知识.作者拥有10+年互联网服务架构.AI产品研发经验.团 ...

  2. Windows Server之KMS

    KMS是什么? KMS全称是Key Management Service,本身就是微软官方提供的一种激活方式,通常用于大型组织客需要激活的客户端数量不固定的情况. 正常情况下,激活Windows系统需 ...

  3. k8s之hostPath存储卷

    一.简介 hostPath:用于将目录从工作节点的文件系统挂载到pod中. 数据的生命周期与节点相同.我们知道,虽然hostPath卷实现pod中数据存储到节点的文件系统中,但是pod的调度不是固定的 ...

  4. MVC如何创建区域

    前言 MVC 划分区域可以为项目成立不同的小模块,方便团队之间开发,与增强项目结构的清晰度. 正文 建立区域: 在areas里面建立区域.,然后填写命名. 然后区域注册即可: 但是这样做依然无法解决项 ...

  5. 力扣176(MySQL)-第二高的薪水（中等）

    题目: id 是这个表的主键.表的每一行包含员工的工资信息. 编写一个 SQL 查询,获取并返回 Employee 表中第二高的薪水 .如果不存在第二高的薪水,查询应该返回 null . 查询结果如下 ...

  6. HarmonyOS NEXT应用开发案例—自定义日历选择器

    介绍 本示例介绍通过CustomDialogController类显示自定义日历选择器. 效果图预览 使用说明 加载完成后显示主界面,点当前日期后会弹出日历选择器,选择日期后会关闭弹窗,主页面日期会变 ...

  7. 面向K8s设计误区

    K8s设计模式 Kubernetes是一个具有普遍意义的容器编排工具,它提供了一套基于容器构建分布式系统的基础依赖,其意义等同于Linux在操作系统中的地位,可以认为是分布式的操作系统. 自定义资源 ...

  8. Go 语言网络库 getty 的那些事

    简介: Getty 维护团队不追求无意义的 benchmark 数据,不做无意义的炫技式优化,只根据生产环境需求来进行自身改进.只要维护团队在,Getty 稳定性和性能定会越来越优秀. 个人从事互联网 ...

  9. 运营也用的起来的数据分析工具：Quick BI即席分析详解

    ​简介: 数据部门是一个容易被投诉的"高危"部门,需求响应慢.数据准确性不高会影响业务的发展. 然而数据分析师每周动辄就有几十个需求在手,无限的加班也无法解决所有问题,到底怎样才能 ...

  10. Serverless 工程实践 | 细数 Serverless 的配套服务

    ​简介: 上文说到云计算的十余年发展让整个互联网行业发生了翻天覆地的变化,Serverless 作为云计算的产物,或者说是云计算在某个时代的表现,被很多人认为是真正意义上的云计算,关于"Se ...