CSS 设置渐变背景 CSS 设置渐变边框

一、css渐变背景添加透明度opacity

css渐变背景经常会在项目开发中遇到,此时UI如果给出的是单一的渐变背景(没有背景透明度),这个我们会很快的写出代码,如下:

<div class="btn">这是一个按钮</div>
.btn {background: linear-gradient(to right, #8B78E6, #50A5A5);color: #fff;padding: 10px 20px;font-size: 16px;border-radius: 5px;border: none;cursor: pointer;transition: background 0.3s ease;
}.btn:hover {background: linear-gradient(to right, #50A5A5, #8B78E6);
}

但偶尔的时候UI会给煎饼的背景色添加一个透明度,但是使用opacity属性会导致文本也会有透明度,接下来给出我的解决办法

.btn {position: relative;color: #fff;padding: 10px 20px;font-size: 16px;border-radius: 5px;border: none;cursor: pointer;transition: background 0.3s ease;z-index: 0;
}.btn:hover {background: linear-gradient(to right, #50A5A5, #8B78E6);
}.btn::after{position: absolute;z-index: -1;top: 0;left: 0;width: 100%;height: 100%;content: "";opacity: 0.3;background: linear-gradient(to right, #8B78E6, #50A5A5);
}

 二、css按钮添加渐变边框

1、使用border-image

.btn {border: 4px solid;border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}/* 或者 */
.btn {border: 4px solid;border-image-source: linear-gradient(to right, #8f41e9, #578aef);border-image-slice: 1;
}

2、使用伪元素

<div class="border-box"><div class="content">这是一个使用伪元素实现渐变边框的按钮</div>
</div>
.border-box {border: 1px solid transparent;border-radius: 16px;position: relative;color: #F2B05E;background-color: #fff;background-clip: padding-box; /*important*/
}.border-box::before {content: '';position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;margin: -1px;border-radius: inherit; /*important*/background: linear-gradient(to right, #8F41E9, #578AEF);
}

3、使用单个元素background-clipbackground-originbackground-image 

.border-box {border: 1px solid transparent;border-radius: 16px;color: #F2B05E;background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradient(to right, #fff,#fff), linear-gradient(90deg, #8F41E9, #578AEF);
}

background-clip 、background-origin属性添加了解释链接,没弄清的童鞋可以点击看下~

分享完毕~~

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

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

相关文章

神策数据发布汽车行业 CJO 解决方案,打造客户旅程全新体验

最近&#xff0c;围绕数字化客户经营&#xff0c;神策数据基于“客户旅程编排&#xff08;Customer Journey Orchestration&#xff0c;简称 CJO&#xff09;”理念&#xff0c;发布汽车行业全新解决方案&#xff0c;通过全渠道打通给客户带来一致的、个性化的体验&#xff0c;…

【HTML专栏1】语法规范、基础结构标签

本文属于HTML/CSS专栏文章&#xff0c;适合WEB前端开发入门学习&#xff0c;详细介绍HTML/CSS如果使用&#xff0c;如果对你有所帮助请一键三连支持&#xff0c;对博主系列文章感兴趣点击下方专栏了解详细。 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;HTML/CS…

无涯教程-JavaScript - DEC2HEX函数

描述 DEC2HEX函数将十进制数转换为十六进制。 语法 DEC2HEX (number, [places])争论 Argument描述Required/Optionalnumber 要转换的十进制整数。 如果number为负数,则将忽略位数,并且DEC2HEX返回10个字符(40位)的十六进制数字,其中最高有效位是符号位。其余的39位是幅度位…

Laravel 模型的关联写入多对多的关联写入 ⑩③

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; THINK PHP &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f44…

读高性能MySQL(第4版)笔记04_操作系统和硬件优化

1. 从软件本身和它运行的典型工作负载来看&#xff0c;MySQL通常也更适合运行在廉价硬件上 2. 基本资源 2.1. CPU 2.2. 内存 2.3. 磁盘 2.4. 瓶颈 2.5. 网络资源 3. CPU 3.1. 最常见的瓶颈是CPU耗尽 3.2. 检查CPU使用率来确定工作负载是否受CPU限制 3.3. 低延迟&…

Python基础篇(17):模块与包

一、as 关键字的使用 1、as 关键字的作用&#xff1a;给导入的模块取别名 import 测试1 as Test_1 import 测试2 as Test_2Test_1.say_hello() Test_2.say_hello() 二、if __name__ __main__ 1、作用 测试当前模块所编写的代码块&#xff0c;根据业务自主选择需要运行的代…

2023 年高教社杯全国大学生数学建模竞赛题目 A 题 定日镜场的优化设计

A 题 定日镜场的优化设计 构建以新能源为主体的新型电力系统&#xff0c;是我国实现“碳达峰”“碳中和”目标的一项重要措施。塔式太阳能光热发电是一种低碳环保的新型清洁能源技术[1]。 定日镜是塔式太阳能光热发电站&#xff08;以下简称塔式电站&#xff09;收集太阳能的基…

网络编程套接字 | UDP套接字

前面的文章中我们叙述了网络编程套接字的一些预备知识点&#xff0c;从本文开始我们就将开始UDP套接字的编写。本文中的服务端与客户端都是在阿里云的云服务器进行编写与测试的。 udp_v1 在v1的版本中我们先来使用一下前面讲过得一些接口&#xff0c;简单的构建一个udp服务器…

OceanBase 4.1解读:读写兼备的DBLink让数据共享“零距离”

梁长青&#xff0c;OceanBase 高级研发工程师&#xff0c;从事 SQL 执行引擎相关工作&#xff0c;目前主要负责 DBLink、单机引擎优化等方面工作。 沈大川&#xff0c;OceanBase 高级研发工程师&#xff0c;从事 SQL 执行引擎相关工作&#xff0c;曾参与 TPC-H 项目攻坚&#x…

NUC980webServer开发

目录 1.RTL8189FTV驱动移植 2.wifi配置工具hostapd移植 1.openssl-1.0.2r交叉编译 2.libnl-3.2.25.tar.gz交叉编译 3.hostapd-2.9.tar.gz交叉编译 4.移植相关工具到开发板 1.RTL8189FTV驱动移植 1. 把驱动文件源码放在linux源码的drivers/net/wireless/realtek/rtlwifi/目录…

【内存管理】C与C++的内存管理异同点

C/C程序内存区域划分 栈又称堆栈&#xff1a;存放非静态局部变量/函数参数/返回值等等&#xff0c;栈是向下增长的。内存映射段&#xff1a;高效的I/O映射方式&#xff0c;用于装载一个共享的动态内存库。用户可使用系统接口创建共享共享内存&#xff0c;做进程间通信。堆&…

LeetCode 1113.报告的记录

数据准备 Create table If Not Exists Actions (user_id int, post_id int, action_date date, action ENUM(view, like, reaction, comment, report, share), extra varchar(10)); Truncate table Actions; insert into Actions (user_id, post_id, action_date, action, ext…

Mybatis传递实体对象只能直接获取,不能使用对象.属性方式获取

mybatis的自动识别参数功能很强大&#xff0c;pojo实体类可以直接写进mapper接口里面&#xff0c;不需要在mapper.xml文件中添加paramType,但是加了可以提高mybatis的效率 不加Param注解&#xff0c;取值的时候直接写属性 //这里是单参数&#xff0c;可以不加param&#xff01…

软件测试/测试开发丨Web自动化 测试用例流程设计

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27173 一、测试用例通用结构回顾 1.1、现有测试用例存在的问题 可维护性差可读性差稳定性差 1.2、用例结构设计 测试用例的编排测试用例的项目结构 1…

CMakeList.txt

CMakeList.txt的写法 前言一个最近写好的CMakeList.txt对上边CMakeList.txt的说明修改 前言 复习一下CMakeList.txt的写法,以下面的一个CMakeList.txt为例 一个最近写好的CMakeList.txt cmake_minimum_required(VERSION 3.17)project(QtVTKProject)# INCLUSION OF Qt # set(…

python开发基础篇1——后端操作K8s API方式

文章目录 一、基本了解1.1 操作k8s API1.2 基本使用 二、数据表格展示K8s常见资源2.1 Namespace2.2 Node2.3 PV2.4 Deployment2.5 DaemonSet2.6 StatefulSet2.7 Pod2.8 Service2.9 Ingress2.10 PVC2.11 ConfigMap2.12 Secret2.13 优化 一、基本了解 操作K8s资源api方式&#xf…

算法通关村-----快速排序的应用

数组中的第K个最大元素 问题描述 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。详见leetcode215 问题分析 之前我们已经使用堆排序/堆查找的…

高等数学刷题

两个公式本质都是相同的 Π/2 1^∞类型

【解决】mysqladmin flush-hosts

问题 mysql出现 mysqladmin flush-hosts&#xff0c;是因为其他客户机连接错误次数过多时&#xff0c;mysql会禁止客户机连接。 解决方法 1、进入服务器数据库&#xff0c;打开数据库命令行界面输入 flush hosts; 此时便可连接 2、可以.修改mysql配置文件&#xff0c;在[…

用户促活留存新方式——在APP中嵌入小游戏

随着APP同类产品的不断出现&#xff0c;APP开发者们面临着激烈的竞争&#xff0c;很多APP下载后被新的APP取代&#xff0c;获客成本越来越高。同时开发者还会面临用户粘性差、忠诚度低、用完即走、留存困难&#xff0c;商业化价值被大大缩减。 在APP中植入小游戏来提高用户活跃…