css 怎么绘制一个带圆角的渐变色的边框

news/2024/2/23 14:01:04/文章来源:https://blog.csdn.net/qq_33769914/article/details/135534661

1,可以写两个样式最外面的div设置一个渐变的背景色。里面的元素使用纯色。但是宽高要比外面元素的小。可以利用里面的元素设置padding这样挡住部分渐变色。漏出来的渐变色就像边框一样。

<div class="cover-wrapper">

   <div class="item-cover">

   </div>

</div>

.cover-wrapper{

     background: linear-gradient(310deg,#821ced,#e7166b);

     border-radius:16px;

}

.item-cover{

    border-radius:16px;

    padding:2px;//padding值就是渐变边框的宽度

    background:#000;

}

2.使用

background-image
border: 1px solid transparent;
background-clip: padding-box,border-box;
background-origin: padding-box,border-box;
background-image: linear-gradient(90deg,#BBFAEB,#DCF9E6 42%,#F4F9E2),linear-gradient(151deg,#33e9bf,#c7e58a,#b1e8cc);

#BBFAEB,#DCF9E6 42%,#F4F9E2是填充的颜色

#33e9bf,#c7e58a,#b1e8cc是边框的颜色

推荐使用第二种方法 。第一种圆角的地方不够圆滑。细看的话稍微有点和其他地方粗细不一致

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

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

相关文章

MongoDB-数据库文档操作(2)

任务描述 文档数据在 MongoDB 中的查询和删除。 相关知识 本文将教你掌握&#xff1a; 查询文档命令&#xff1b;删除文档命令。 查询文档 我们先插入文档到集合 stu1 &#xff1a; document([{ name:张小华, sex:男, age:20, phone:12356986594, hobbies:[打篮球,踢足球…

【软件测试】学习笔记-测试基础架构

这篇文章探讨什么是测试基础架构。 什么是测试基础架构&#xff1f; 测试基础架构指的是&#xff0c;执行测试的过程中用到的所有基础硬件设施以及相关的软件设施。因此&#xff0c;我们也把测试基础架构称之为广义的测试执行环境。通常来讲&#xff0c;测试基础 架构主要包括…

【PostgreSQL内核学习(二十三)—— 执行器(ExecEndPlan)】

执行器&#xff08;ExecEndPlan&#xff09; 概述ExecEndPlan 函数ExecEndNode 函数 总结 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求遵循合理使用原则&#xff0c;并在适用的情况下注明引用…

压力测试+接口测试(工具jmeter)

jmeter是apache公司基于java开发的一款开源压力测试工具&#xff0c;体积小&#xff0c;功能全&#xff0c;使用方便&#xff0c;是一个比较轻量级的测试工具&#xff0c;使用起来非常简单。因 为jmeter是java开发的&#xff0c;所以运行的时候必须先要安装jdk才可以。jmeter是…

opencv-4.8.0编译及使用

1 编译 opencv的编译总体来说比较简单&#xff0c;但必须记住一点&#xff1a;opencv的版本必须和opencv_contrib的版本保持一致。例如opencv使用4.8.0&#xff0c;opencv_contrib也必须使用4.8.0。 进入opencv和opencv_contrib的github页面后&#xff0c;默认看到的是git分支&…

DC电源模块与AC电源模块的对比分析

DC电源模块与AC电源模块的对比分析 BOSHIDA DC电源模块和AC电源模块是两种常见的电源模块&#xff0c;它们在供电方式、稳定性、适用范围等方面有所不同&#xff0c;下面是它们的对比分析&#xff1a; 1. 供电方式&#xff1a; DC电源模块通过直流电源供电&#xff0c;通常使用…

shiro实战

接下来我将用编码的方式&#xff0c;来演示如何使用shirojwt实现认证并下发token&#xff0c;但是没有整合到springboot中。只是shiro的API的调用 1. shirojwt 实现登录认证、获取资源的流程图 2.编码实现 &#xff08;1&#xff09;工程结构 &#xff08;2&#xff09;核心代…

msvcr110.dll缺失怎么解决,修复msvcr110.dll缺失的方法分享

首先&#xff0c;我们来了解一下msvcr110.dll是什么文件。msvcr110.dll是Microsoft Visual C 2012 Redistributable的一个组件&#xff0c;它包含了许多运行库函数&#xff0c;这些函数在编译和运行使用Visual C编写的程序时是必不可少的。简单来说&#xff0c;msvcr110.dll就是…

Unity解决Udp客户端无法接收数据的问题

Unity解决Udp客户端无法接收数据的问题 在我之前做过的项目中&#xff0c;其中不少涉及Udp客户端的项目。在这些项目中&#xff0c;一般只需要实现客户端向服务器端发送数据的功能就可以了&#xff0c;一般都不用接收服务器端发送的数据&#xff0c;但是也有同学使用了我分享的…

[C#]winform部署官方yolov8-obb旋转框检测的onnx模型

【官方框架地址】 https://github.com/ultralytics/ultralytics 【算法介绍】 Yolov8-obb&#xff08;You Only Look Once version 8 with Oriented Bounding Boxes&#xff09;是一种先进的对象检测算法&#xff0c;它在传统的Yolov3和Yolov4基础上进行了优化&#xff0c;加…

Next.js 开发指​南(GitHub 115k star​)

Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架&#xff0c;它扩展了最新的 React 特性&#xff0c;集成了基于 Rust 的 JavaScript 工具&#xff0c;可以帮助你快速创建全栈 Web 应用 &#xff08;full-stack Web applications&#xff09; 。 对于有一定 React 基础…

软件测试|使用selenium进行多窗口操作

简介 在我们进行自动化测试的工作中&#xff0c;经常会点击某个元素或者链接就会自动打开一个新页面&#xff0c;需要我们转到新打开的页面去进行操作&#xff0c;这个时候我们就需要能够自动切换到新页面进行后续的操作&#xff0c;selenium同样支持这个功能&#xff0c;本文…

FineBI报表页面大屏小屏自适应显示问题

大屏正常显示 显示正常 小屏BI自适应显示 存在遮挡字体情况 小屏浏览器缩放显示 等比缩放后显示正常

【CV】使用 matplotlib 画统计图,并用 OpenCV 显示静图和动图

1. 效果 静图 动图 2.思路 准备数据使用 pyplot 画统计图图片写入流&#xff0c;流转图&#xff08;numpy&#xff09;matplotlib 颜色 RGB 转 OpenCV 颜色 BRG 4. 静图 代码过程有注释&#xff0c;很简单的实现。注意 matplotlib RGB 转 OpenCV BGR image image[:, :,…

【51单片机系列】proteus仿真单片机的串口通信

本文参考&#xff1a;https://zhuanlan.zhihu.com/p/425809292。 在proteus之外使用串口软件和单片机通信。通过在proteus设计一个单片机接收PC发送的数据&#xff0c;并将接收的数据发送出去&#xff0c;利用软件【Configure Virtual Serial Port Driver】创建一对虚拟串口&am…

网络安全技术新手入门:利用永恒之蓝获取靶机控制权限

目录 前言 一、搜索永恒之蓝可用模块 二、使用攻击模块 三、配置攻击模块 四、攻击 五、总结 前言 相关法律声明&#xff1a;《中华人民共和国网络安全法》第二十七条 任何个人和组织不得从事非法侵入他人网络、干扰他人网络正常功能、窃取网络数据等危害网络安全的活动&…

php 的数学常用函数

目录 1.常用列表 2.代码示例 1.常用列表 函数名描述输入输出abs()求绝对值数字绝对值数字ceil()进一法取整浮点数进一取整floor()舍去法求整浮点数直接舍去小数部分fmod()浮点数取余 两个浮点 数,x>y 浮点余数 pow()返回数的n次方基础数n次方乘方值round()浮点数四舍五入…

数据结构期末复习(4)串 树和二叉树

串 在数据结构中&#xff0c;串是由零个或多个字符组成的有限序列。它是一种线性数据结构&#xff0c;常用于表示和处理文本、字符串等信息。 串的特点包括&#xff1a; 顺序性&#xff1a;串中的字符按照一定的先后顺序排列&#xff0c;每个字符都有一个唯一的位置。有限性&…

关于并发十道常见面试题

面试题一&#xff1a;线程中的start和run方法有什么区别 Java中线程是通过Thread类来实现的&#xff0c;每个线程都是通过特定的Thread对象所对应的run方法来完成 start&#xff08;&#xff09;方法来启动线程&#xff0c;真正的实现多线程&#xff0c;这时无需等待run&…

华为交换机配置NQA TCP检测IP网络响应时间

微思 | 华为HCIA试听课程&#xff1a;网络工程师的基本功&#xff1a;网络地址转换NAT 微思 | 华为HCIP试听课程&#xff1a;华为HCIP必考题&#xff1a;DHCP协议原理与配置 组网需求 如图1所示&#xff0c;总部和子公司之间需要跨越外部网络进行通信&#xff0c;DeviceA和De…