常用的CSS渐变样式

news2024/11/17 7:49:17

边框渐变
方案1: 边框渐变( 支持圆角)

   width: 726px;
   height: 144px;
   border-radius: 24px;
   border: 5px solid transparent;
   background-clip: padding-box, border-box; 
   background-origin: padding-box, border-box; 
   background-image: linear-gradient(to right, #fff, #fff), linear-gradient(100deg, rgba(86, 199, 255, 1), rgba(255, 255, 255, 0));

效果如图:在这里插入图片描述
边框渐变(border-image不支持圆角)

	width: 726px;
    height: 144px;
    border-radius: 24px;
    border: 5px solid;
    background: #fff;
    border-image: linear-gradient(100deg, rgba(86, 199, 255, 1), rgba(255, 255, 255, 0)) 5 5;

效果如图:在这里插入图片描述
加上属性后clip-path: inset(0 round 24px);,支持圆角,但圆角的渐变色有缺失,如下图:在这里插入图片描述

字体颜色渐变

背景色渐变
background: linear-gradient(#6AF1D0 0%, #B6FFFA 40%, #B9EBFF 100%);

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SQL基础使用

SQL的概述 SQL全称: Structured Query Language,结构化查询语言,用于访问和处理数据库的标准的计算机语言。 SQL语言1974年由Boyce和Chamberlin提出,并首先在IBM公司研制的关系数据库系统SystemR上实现。 经过多年发…

百度文心一言接入教程-Java版

原文链接 前言 前段时间由于种种原因我的AI BOT网站停运了数天,后来申请了百度的文心一言和阿里的通义千问开放接口,文心一言的接口很快就通过了,但是文心一言至今杳无音讯。文心一言通过审之后,很快将AI BOT的AI能力接入了文心…

Ansible单yaml文件部署Zabbix5.0监控平台

文章目录 Ansible单yaml文件部署Zabbix5.0监控平台节点规划案例实施基础环境准备编写剧本文件ZabbixWeb界面(1)改中文(2)添加监控主机 Ansible单yaml文件部署Zabbix5.0监控平台 节点规划 IP主机名节点192.168.200.10ansibleAnsible节点192.168.200.20zabbix-serverZabbix-ser…

5、Kubernetes核心技术 - Controller控制器工作负载

目录 一、Deployments - 控制器应用 二、Deployment升级回滚和弹性收缩 2.1、创建一个 1.14 版本的 pod 2.2、应用升级 2.3、查看升级状态 2.4、查看历史版本 2.5、应用回滚 2.6、弹性伸缩 三、StatefulSet - 有状态应用 四、DaemonSet - 守护进程 五、Job - 单次任…

使用低代码开发,需要注意哪些?

低代码平台的历史相对较短,大约始于 2000 年初,源于快速应用程序开发工具。随着低代码平台和工具的日益普及和优势,它不断发展以满足各种领域和角色的需求。 本文将研究各种低代码和无代码应用程序开发方法、业务用例、挑战和未来预测等。 一…

2022前端开发实习总结报告

2022前端开发实习总结报告1 一、顶岗实习目的 根据所学课程的理论知识,结合企业的运营实际,掌握软件开发的一般过程,软件的生命周期和作为一个开发人员就应具备的基本潜力,并撰写顶岗实习报告。使学生进一步巩固所学理论知识&am…

判断是否是二叉对称树(两种方法:递归+迭代)

给你一个二叉树的根节点 root , 检查它是否轴对称。 输入:root [1,2,2,3,4,4,3] 输出:true 源代码如下: //递归 class Solution { public:bool dfs(TreeNode* p,TreeNode* q){if(pnullptr && qnullptr) return true;//同…

redis的如何使用

1、redis的使用 1.1windows安装 安装包下载地址:Releases dmajkic/redis GitHub 1.2 redis中常使用的几个文件 1.3 redis中运行 双击redis-server,既可以运行。 1.4使用redis客户单来连接redis 1.5redis的常用指标 redis-serve 服务端,端口号&am…

【嵌入式学习笔记】嵌入式基础10——STM32时钟配置

1.认识时钟树 简单来说,时钟是具有周期性的脉冲信号,最常用的是占空比50%的方波 1.1.F1的时钟树 1.2.F4的时钟树(407为例) 1.3.F7的时钟树 1.4.H7的时钟树 2.配置系统时钟(F1为例) 2.1.系统时钟配置步骤 配置HSE VALUE:告诉HAL库外部晶振…

软件测试技能大赛任务二单元测试试题

任务二 单元测试 执行代码测试 本部分按照要求,执行单元测试,编写java应用程序,按照要求的覆盖方法设计测试数据,使用JUnit框架编写测试类对程序代码进行测试,对测试执行结果进行截图,将相关代码和相关截…

浅谈深度神经网络

Deep neural networks are completely flexible by design, and there really are no fixed rules when it comes to model architecture. -- David Foster 前言 神经网络 (neural network) 受到人脑的启发,可模仿生物神经元相互传递信号。神经网络就是由神经元组成…

JMeter 怎么查看 TPS 数据教程,简单易懂

TPS 是软件测试结果的测量单位。一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。客户机在发送请求时开始计时,收到服务器响应后结束计时,以此来计算使用的时间和完成的事务个数。在 JMeter 中,我们可以使用以下方法查看 T…

1300*C. Slay the Dragon

Example input 4 3 6 2 3 5 3 12 7 9 4 14 1 10 8 7 output 1 2 4 0 2 解析: 题意是选一个人去攻击龙,其余人防守龙,可以花费 x 块钱让某英雄能力 x,问最少的花费是多少。 贪心,选择大于龙的防御力并且最小的那个英…

mac版窗口管理 Magnet for mac中文最新

magnet mac版是一款运行在苹果电脑上的一款优秀的窗口大小控制工具,拖拽窗口到屏幕边缘可以自动半屏,全屏或者四分之一屏幕,还可以设定快捷键完成分屏。这款专业的窗口管理工具当您每次将内容从一个应用移动到另一应用时,当您需要…

ROS->ROS2, ROS2的安装与测试

本文参考古月居 – ROS2教程做了摘要,以便后用。 ROS1目前有三个版本可以选择,但未来ROS2才是应用领域的主流。 ROS的发展: ROS2的发展: 有关ROS2和ROS1的对比

第五章:Spring下

第五章&#xff1a;Spring下 5.1&#xff1a;AOP 场景模拟 创建一个新的模块&#xff0c;spring_proxy_10&#xff0c;并引入下面的jar包。 <packaging>jar</packaging><dependencies><dependency><groupId>junit</groupId><artifactI…

[CrackMe]Chafe.2.exe的逆向及注册机编写

1. 逆向分析过程 先上手把玩一下, 从外观上看感觉和Chafe.1.exe差不了多少, 还是那个界面 找到RegisterClassEx从而找到其对应的窗口过程 找到对应的WM_COMMAND分支 首先其修改了代码中的4个字节, 将其修改成0x00584554, 然后通过GetDlgItemInt获取了serial值 这里其实原本…

笔记20230727

1. http2.0&#xff0c;概念就不说了&#xff0c;查看是否使用&#xff1a;network调试&#xff0c;查看请求的header-view source&#xff0c;可以查看http版本&#xff1b;后端&#xff0c;如nginx&#xff0c;配置&#xff0c;http2表示开启。后端开启、浏览器支持&#xff…

利用小波包对一维信号进行降噪或压缩(MATLAB)

function [ output_args ] example4_12( input_args ) %EXAMPLE4_12 Summary of this function goes here % Detailed explanation goes here clc; clear; % 设置信噪比和随机数的初始值 snr 3; init 2055615866; % 生成一个原始信号xref和含高斯白噪声的信号x [xref,x] …

nginx配置auth_basic认证

nginx配置auth_basic认证 windows 1、下载 httpd 下载地址: https://www.apachelounge.com/download/ 2、生成密码&#xff1a;打开cmd&#xff0c;进入到 Apache24\bin后 html htpasswd.exe -c G:\nginx\nginx-1.14.2\conf\.htpasswd user 其中: G:\nginx\nginx-1.14.2\conf…