css 边框渐变

需求:

  • 普通的div 边框不好看,做一个渐变色

进程:

  • 最简单的当然是做一个内部是白色的边框是渐变色的图,然后使用 background: url("back.jpg"),这样看起来就像是做了一个渐变的边框
  • 如果做不了图,可以做一个渐变的背景如何用白底把中间的覆盖掉
{.box1 {background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景加一个渐变padding: 1px;.box2 {width: 100%;height: 100%;background-color: #FFF;}}
}
  • 这个当border 有弧度的时候看起来会有点奇怪,所以可以反着来
{.box1 {border: 1px solid transparent;background-clip: padding-box; // 裁剪背景到边框以内,这样下面就能露出边框的颜色background-color: #FFF;border-radius: 4px;.box2 {z-index: -1; //把上面的放到下面background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景加一个渐变border-radius: inherit;width: 100%;height: 100%;}}
}
  • 使用border-image
    hieght: 100px;width: 100px;background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景也加一个渐变border: 1px solid; //这个是必须的不然边框都没有//边框渐变       起始色号              中间色号     结尾色号        border-image: linear-gradient(rgba(30, 93, 255, 0.35),#FFF,rgba(30, 93, 255, 0.35)) 1;
  • 这个参数有个限制,ie10 及以下浏览器不支持

拓展:

  • background-clip 有3个属性,border-box:整个div 范围以内,padding-box:border 范围以内,所以上面可以裁剪留下边框的部分,content-box:内容以内,就padding 啥的都算上,都裁剪掉,还有一个特殊的,text,这个只有chrome 里有用,不过这玩意贼牛逼,可以裁剪到文字级别

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

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

相关文章

美摄视频SDK的HDR格式编辑方案

在当今的视觉媒体时代,高动态范围(HDR)技术已成为高质量视频内容的标配。为了满足企业对高效、高质量视频处理的需求,美摄科技推出了业界领先的视频SDK,全面支持多种HDR标准的图像视频进行处理。 一、核心优势 HDR全…

Android 13.0 Recent列表不显示某个app

1.概述 在13.0 的系统产品rom定制化开发中,在点击导航栏最近任务列表时,如果做到不显示某个app 呢 一种做法是在app中直接处理 一种做法是在framework中处理 接下来看这两种处理方法 1, app中处理 为该应用AndroidManifest xml文件中主MainActivity设置属性 android:exclu…

重拾计网-第一弹

🎉欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹 ✨博客主页:小小恶斯法克的博客 🎈该系列文章专栏:重拾计算机网络 🍹文章作者技术和水平很有限,如果文中出现错…

vue+springboot的文件上传处理

目录 1.前端&#xff1a; 2.说明 1.示例&#xff1a; 使用前端框架中的上传组件&#xff0c;例如element plus及arco design&#xff0c;要使用自定义的上传属性或者change属性&#xff0c;获取上传的文件信息。 <template><a-drawer :width"600" :visi…

四款坚固耐用、小尺寸、1EDB9275F、1EDS5663H、1EDN9550B、1EDN7512G单通道栅极驱动器IC

1、1EDB9275F 采用DSO-8 150mil封装的单通道隔离栅极驱动器&#xff08;PG-DSO-8&#xff09; EiceDRIVER™ 1EDB 产品系列 单通道栅极驱动器IC具有3 kVrms的输入输出隔离电压额定值。 栅极驱动器系列具有6/-4 ns传输延迟精度&#xff0c;可针对具有高系统级效率的快速开关应…

vue 前端加密解密 CryptoJS

$ npm install crypto-js 安装cryptojs 安装方法 实际使用情况: import CryptoJS from "crypto-js"; //let decrypted CryptoJS.lib.SerializableCipher.decrypt( // CryptoJS.algo.AES, // data.tuituiMobileCrypt, // …

libcurl是一个用于进行网络通信的开源库,提供了各种功能和选项,可以用于发送和接收HTTP请求、FTP操作等

libcurl libcurl是一个用于进行网络通信的开源库&#xff0c;提供了各种功能和选项&#xff0c;可以用于发送和接收HTTP请求、FTP操作、SMTP邮件等。它支持多种协议&#xff0c;包括HTTP、HTTPS、FTP、FTPS、SMTP、POP3、IMAP等。 以下是libcurl库的一些特点和功能&#xff1…

Python 内置数据类型详解

内置数据类型 在编程中&#xff0c;数据类型是一个重要的概念。 变量可以存储不同类型的数据&#xff0c;不同类型可以执行不同的操作。 Python默认内置了以下这些数据类型&#xff0c;分为以下几类&#xff1a; 文本类型&#xff1a;str 数值类型&#xff1a;int、float、…

宠物空气净化器真的有用吗?五款猫用宠物空气净化器测评!

作为一个养猫四年的铲屎官&#xff0c;我不得不说&#xff0c;宠物空气净化器是21世纪养猫人最伟大的神器之一&#xff01; 当我刚开始养猫的时候&#xff0c;我并没有意识到猫毛会成为一个如此头疼的问题。虽然朋友们告诉我要做好心理准备&#xff0c;但我并没有想到家里的猫毛…

最新版git2.43安装、记住用户名和密码以及tortoisegit2.15使用

一、下载git 打开git官网地址&#xff1a;https://git-scm.com/进行下载 下载完安装&#xff0c;一直next就好&#xff0c;如果愿意就可以改下安装路径&#xff0c;改在d盘。 具体可以参考&#xff1a;git安装教程 二、安装完下载小乌龟以及中文语言包 下载地址&#xff1a;…

长期戴耳机的危害有哪些?戴哪种耳机不伤耳朵听力?

长期佩戴耳机可能会出现听力下降、耳道感染等危害。 听力下降&#xff1a;长时间戴耳机可能会导致耳道内的声音过大&#xff0c;容易对耳膜造成一定的刺激&#xff0c;容易出现听力下降的情况。 耳道感染&#xff1a;长时间戴耳机&#xff0c;耳道长期处于封闭潮湿的情况下&a…

Node+Express编写接口---服务端

开始&#xff1a; 个人兴趣爱好&#xff0c;欢迎大家多多指教&#xff01;(点击直达源码!) node_vue_admin: 第一个以node为后端,vue为前端的后台管理项目https://gitee.com/ah-ah-bao/node_vue_admin.git 第一步:安装 安装Node.js 点击直达Node.js (nodejs.org) 安装Navic…

Vue 2生命周期已达终点,正式结束使命

Vue.js是一款流行的JavaScript框架&#xff0c;拥有广泛的应用和开发者社区。自Vue.js 2发布以来&#xff0c;它在前端开发中扮演了重要角色&#xff0c;并且被广泛采用。然而&#xff0c;技术的发展是无法阻挡的&#xff0c;随着2024年的到来&#xff0c;Vue 2的生命周期也走到…

011:vue结合css动画animation实现下雪效果

文章目录 1. 实现效果2. 编写一个下雪效果组件 VabSnow.vue3. 页面使用4. 注意点 1. 实现效果 GIF录屏文件太卡有点卡&#xff0c;实际是很丝滑的 2. 编写一个下雪效果组件 VabSnow.vue 在 src 下新建 components 文件&#xff0c;创建VabSnow.vue组件文件 <template>…

React16源码: React中的FunctionComponent的源码实现

Function Component 1 &#xff09;概述 FunctionComponent 是引出调和子节点的过程调和子节点是一个统一的过程&#xff0c;和各类组件不同类型没有太大关系 在 ReactDOM.render 第一次时&#xff0c;只有一个Fiber对象这个Fiber对象它会保存它的props, 里面有很多的childre…

【网络安全知识】5种较流行的网络安全框架及特点分析

网络安全框架主要包括安全控制框架&#xff08;SCF&#xff09;、安全管理框架&#xff08;SMP&#xff09;和安全治理框架&#xff08;SGF&#xff09;等类型。 对于那些希望按照行业最佳实践来开展网络安全能力建设的企业来说&#xff0c;理解并实施强大的网络安全框架至关重…

雍禾植发为地球种下发际线,雍禾医疗以公益名义为消费者种下希望

“绿水青山才是金山银山”&#xff0c;绿色现已成为新时代中国的鲜明底色。天更蓝&#xff0c;水更清&#xff0c;人与环境和谐发展已深入人心。位于内蒙古自治区阿拉善盟西部的额济纳旗常年干旱少雨&#xff0c;风沙肆虐&#xff0c;这里亟需被植上一片森林&#xff0c;为地球…

使用Spring管理Caffeine缓存(CacheManager+Caffeine)

1 依赖 使用Spring管理Caffeine缓存的主要pom依赖如下所示。 <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.8.RELEASE</version> </dependency><dependency…

介绍 sCrypt:BTC 的 Layer-1 智能合约框架

在 TypeScript 中开发 BTC 智能合约 我们非常高兴地推出 sCrypt&#xff1a;一种现代 Typescript 框架&#xff0c;用于在 BTC 上开发第一层智能合约&#xff0c;无需分叉。 现在&#xff0c;人们可以使用现代开发工具在易于使用的统一框架中编写、测试、调试、部署和调用智能合…

Microsoft Word 删除空行

Microsoft Word 删除空行 1. 删除空行1.1. 替换1.2. 段落标记 References 1. 删除空行 1.1. 替换 1.2. 段落标记 特殊格式 -> 段落标记 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/