css 实现圆角渐变色效果

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css 实现圆角渐变色效果</title>
    <style>
      .card-box,
      .card-box-1,
      .card-box-2 {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 12px;
        background-image: linear-gradient(#ffffff, #ffffff),
          linear-gradient(180deg, rgba(0, 191, 198, 1), rgba(0, 191, 198, 0));
        background-origin: border-box;
        background-clip: content-box, border-box;
      }
      .card-box-1 {
        background-image: linear-gradient(#ffffff, #ffffff),
          linear-gradient(180deg, rgba(255, 71, 25, 1), rgba(0, 191, 198, 0));
      }
      .card-box-2 {
        background-image: linear-gradient(#ffffff, #ffffff),
          linear-gradient(180deg, rgb(198, 0, 198), rgba(198, 0, 33, 1));
      }
      .in {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        padding: 12px;
        box-sizing: border-box;
        background: linear-gradient(180deg, #f1ffff 0%, #faffff 100%);
      }
      .card-box-1 .in {
        background: linear-gradient(180deg, #fff4f1 0%, #fffcfb 100%);
      }
      .card-box-2 .in {
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div class="card-box">
      <div class="in">
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
      </div>
    </div>
    <div class="card-box-1">
      <div class="in">
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
      </div>
    </div>
    <div class="card-box-2">
      <div class="in">
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
        <div>我是文本我是文本...</div>
      </div>
    </div>
  </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/284548.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

字母简化（UPC练习）

字母简化（UPC练习）

题目描述 给出一串全部为小写英文字母的字符串&#xff0c;要求把这串字母简化。简化规则是&#xff1a;统计连续出现的字母数&#xff0c;输出时先输出个数&#xff0c;再输出字母。比如&#xff1a;aaabbbaa&#xff0c;则简化为3a3b2a&#xff1b;而zzzzeeeeea&#xff0c;…
阅读更多...
渗透线上下料控制(SCL源代码)

渗透线上下料控制(SCL源代码)

有关渗透线的其它详细介绍请参考下面链接文章&#xff1a; https://rxxw-control.blog.csdn.net/article/details/133611151https://rxxw-control.blog.csdn.net/article/details/133611151这里的渗透线上下料属于整个渗透线流程里的最前端和最后端&#xff0c;分别负责待处理…
阅读更多...
机器学习的分类与经典算法

机器学习的分类与经典算法

机器学习算法按照学习方式分类&#xff0c;可以分为有监督学习&#xff08;Supervised Learning&#xff09;、无监督学习&#xff08;Unsupervised Learning&#xff09;、半监督学习&#xff08;Semi-supervised Learning&#xff09;、强化学习&#xff08;Reinforcement Le…
阅读更多...
C++面向对象基础-构造函数

C++面向对象基础-构造函数

1、构造函数 1.1 基本使用 构造函数是一种特殊的成员函数&#xff0c;用于创建对象&#xff0c;写法上有以下要求&#xff1a; 函数名必须与类名完全相同构造函数不写返回值如果程序员不手动编写构造函数&#xff0c;编译器就会自动添加一个无参的构造函数 手动添加构造函数&am…
阅读更多...
小白学 PyTorch 系列：54个超强 pytorch 操作

小白学 PyTorch 系列：54个超强 pytorch 操作

最近观察到一个有趣的趋势&#xff0c;越来越多的人在学术界热衷于学习和应用PyTorch。在工业界&#xff0c;虽然仍有一些项目在延续使用之前的深度学习框架&#xff0c;但 PyTorch 的影响力也在逐渐渗透。 对于昨天为什么没发文&#xff0c;原因很心酸。把 PyTorch 的这篇文章…
阅读更多...
亚马逊鲲鹏系统一款自动化全能软件

亚马逊鲲鹏系统一款自动化全能软件

亚马逊鲲鹏系统是一款专为亚马逊买家提供全方位功能的自动化软件。它不仅可以轻松实现自动注册、养号、测评、QA等一系列操作&#xff0c;更在用户关心的账号关联问题上做出了创新性的解决方案。有的朋友可能对全自动化操作心存疑虑&#xff0c;担心可能引起关联从而导致封号&a…
阅读更多...
24届春招实习必备技能（一）之MyBatis Plus入门实践详解

24届春招实习必备技能（一）之MyBatis Plus入门实践详解

MyBatis Plus入门实践详解 一、什么是MyBatis Plus? MyBatis Plus简称MP&#xff0c;是mybatis的增强工具&#xff0c;旨在增强&#xff0c;不做改变。MyBatis Plus内置了内置通用 Mapper、通用 Service&#xff0c;仅仅通过少量配置即可实现单表大部分 CRUD 操作&#xff0…
阅读更多...
FileZilla的使用，主动模式和被动模式思维导图

FileZilla的使用，主动模式和被动模式思维导图

注&#xff1a;图片 &#xff08;与上面的思维导图文字配图看&#xff09;
阅读更多...
PAT乙级1045 快速排序

PAT乙级1045 快速排序

著名的快速排序算法里有一个经典的划分过程&#xff1a;我们通常采用某种方法取一个元素作为主元&#xff0c;通过交换&#xff0c;把比主元小的元素放到它的左边&#xff0c;比主元大的元素放到它的右边。 给定划分后的 N 个互不相同的正整数的排列&#xff0c;请问有多少个元…
阅读更多...
node版本管理器nvm的下载和使用

node版本管理器nvm的下载和使用

介绍 nvm 全名 node.js version management&#xff0c;顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。 下载和安装 在下载和安装nvm前&#xff0c;需要确保当前电脑没有安装node&#xff0c;否则则需要先把原来的node卸载了。 下载地址&#…
阅读更多...
Oracle-深入了解cache buffer chain

Oracle-深入了解cache buffer chain

文章目录 1.Cache buffer chain介绍2.Buffer cache的工作原理3 Buffer chains4.Multi-versioning of Buffers5.Latches6.诊断CBC latch等待7.解决 CBC Latch等待 1.Cache buffer chain介绍 经常看到会话等待事件“latch&#xff1a;cache buffers chain”。 如果想知道意味着什…
阅读更多...
007、控制流

007、控制流

先看下本篇学习内容&#xff1a; 通过条件来执行 或 重复执行某些代码 是大部分编程语言的基础组成部分。在Rust中用来控制程序执行流的结构主要就是 if表达式 与 循环表达式。 1. if表达式 if表达式允许我们根据条件执行不同的代码分支。我们提供一个条件&#xff0c;并且做出…
阅读更多...
Reac03:react脚手架配置(代理配置)

Reac03:react脚手架配置(代理配置)

react脚手架配置 reactAjax下载Axios配置代理第二种配置代理的方式 github搜索案例 reactAjax React本身只关注于界面&#xff0c;并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax(或自己封装) 常用的ajax请求库 j…
阅读更多...
ctfshow——文件上传

ctfshow——文件上传

文章目录 文件上传思路web 151web 152web 153知识点解题 web 154web 155web 156web 157web 158web 159web160web 161 文件上传思路 web 151 打开页面显示&#xff1a;前台校验不可靠。说明这题是前端验证。 右键查看源代码&#xff0c;找到与上传点有关的前端代码&#xff1a…
阅读更多...
[SSD 测试 1.3] 消费级SSD全生命周期测试

[SSD 测试 1.3] 消费级SSD全生命周期测试

依公知及经验整理，原创保护，禁止转载。 专栏 《深入理解SSD》 <<<< 返回总目录 <<<< 构建消费级SSD全生命周期测试，开展性能测试、兼容性测试、功能测试、环境应力测试、可靠性测试、电器检测。 以忆联消费级存储实验室为例，消费级存储实验室面积…
阅读更多...
docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)

docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)

Docker 应用部署 一、部署MySQL 搜索mysql镜像 docker search mysql拉取mysql镜像 docker pull mysql:5.6创建容器&#xff0c;设置端口映射、目录映射 # 在/root目录下创建mysql目录用于存储mysql数据信息 mkdir ~/mysql cd ~/mysqldocker run -id \ -p 3307:3306 \ --na…
阅读更多...
信号与线性系统翻转课堂笔记19——连续/离散系统的零极点与稳定性

信号与线性系统翻转课堂笔记19——连续/离散系统的零极点与稳定性

信号与线性系统翻转课堂笔记19——连续/离散系统的零极点与稳定性 The Flipped Classroom19 of Signals and Linear Systems 对应教材&#xff1a;《信号与线性系统分析&#xff08;第五版&#xff09;》高等教育出版社&#xff0c;吴大正著 一、要点 &#xff08;1&#x…
阅读更多...
中科亿海微UART协议

中科亿海微UART协议

引言 在现代数字系统设计中&#xff0c;通信是一个至关重要的方面。而UART&#xff08;通用异步接收器/发送器&#xff09;协议作为一种常见的串行通信协议&#xff0c;被广泛应用于各种数字系统中。FPGA&#xff08;现场可编程门阵列&#xff09;作为一种灵活可编程的硬件平台…
阅读更多...
2023结婚成家，2024借势起飞

2023结婚成家，2024借势起飞

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…
阅读更多...
《深入理解JAVA虚拟机笔记》Java 运行时内存区域

《深入理解JAVA虚拟机笔记》Java 运行时内存区域

程序计数器&#xff08;线程私有&#xff09; 程序计数器&#xff08;Program Counter Register&#xff09;是一块较小的内存空间&#xff0c;它可以看做是当前线程所执行的字节码的行号指示器。在 Java 虚拟机的概念模型里&#xff0c; 字节码解释器工作时就是通过改变这个计…
阅读更多...
最新文章

Copyright @ 2022~2023