给你的边框加点渐变
目录
- 前言
- border-image
- border-image
- 实现
- background+父子div
- backgorund+一个div+一个伪元素
- background-clip
🧨🧨🧨
大家好，我是搞前端的半夏 🧑，一个热爱写文的前端工程师 💻.
如果喜欢我的文章，可以关注 ➕ 点赞 👍 一起学习交流前端，成为更优秀的工程师～ 更多故事—点我探索新世界！🧨🧨🧨
前言
总有人觉得CSS就是一个布局的工具，忽视了CSS的重点，CSS的全称是啥？层叠样式表（Cascading Style Sheets）第二个词是啥，样式样式样式！总有人把CSS的强大忽略了。同样的效果，不同的实现方式，总会有好有坏，但是就怕你一种也不会！本文主要通过一个边框的实现方式来学习不同的属性。
border-image
我之前写过一篇文章来专门来介绍这个属性。《24张图攻克border-image 》这里再简单的介绍一下。
border-image
首先这个属性是下面个属性的缩写，
border-image-source 指定资源
border-image-slice规定图片剪裁位置
border-image-width指定宽度
border-image-outset 指定在边框外部绘制 区域 的量
border-image-repeat 这个是和background-repeat基本差不多*
实现
border-image-source不仅可以接受图片，还可以接受渐变。
注意：这种实现方式有一个缺点就是， border-radius:是无法生效的。所以圆角渐变边框,只能say bye!
这里将整个div分割，然后使用streach拉伸整个border-image.
.border-image {width: 200px;height: 100px;border: 2px solid;border-image-source: linear-gradient(45deg, #56ECC7, #9f5ad8);border-image-slice: 1;border-image-repeat: stretch;}
background+父子div
<div class="container"><div class="box"></div>
</div>
<style>.container {background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);padding: 1px;width: 200px;height: 100px;border-radius: 4px;}.box {background: #fff;border-radius: 4px;width: 100%;height: 100%;}</style></head><body><div class="container"><div class="box"></div></div>
backgorund+一个div+一个伪元素
看到上一个例子，可能有人此时会想到既然可以使用两个div，那为何不使用一个div加上:after呢？当然是可以的
注意：这里的伪元素充当的是上面父div的角色，可能有人非不信，一定要把渐变加在container上，然后为元素设置白色。你有没有考虑容器有内容的情况。
.container::after {content: "";z-index: -1;background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);
}<div class="container">渐变边框</div>
background-clip
这个属性不多介绍了，请看之前的文章：http://sylblog.xin/archives/38
background-clip: content-box；背景被裁剪至内容区（content box）外沿.
background-clip: border-box；背景延伸至边框外沿（但是在边框下层）.
我们这里设置两个渐变，一个全白的渐变，使用background-clip: content-box让他覆盖内容区域。然后使用background-clip: border-box；将 linear-gradient(45deg, #56ecc7, #6067f3);放到border上面。这样是为啥要设置 background-origin: border-box;
.container {border: solid 1px transparent;border-radius: 5px;background-image: linear-gradient(#fff, #fff),linear-gradient(45deg, #56ecc7, #6067f3);background-origin: border-box;background-clip: content-box, border-box;text-align: center;line-height: 80px;}
相关文章：
给你的边框加点渐变
目录前言border-imageborder-image实现background父子divbackgorund一个div一个伪元素background-clip🧨🧨🧨 大家好，我是搞前端的半夏 🧑，一个热爱写文的前端工程师 💻. 如果喜欢我的文章&…...
【目标检测】如何使用Yolov8
如何使用Yolov8一、前言二、用法2.1 安装2.2 使用方法2.3 模型2.3.1 目标检测2.3.2 实例分割2.3.3 分类一、前言 一种易于使用的新的对象检测模型。 由 Ultralytics 开发的 Ultralytics YOLOv8 是一种尖端的、最先进的 (SOTA) 模型： https://github.com/ultralyt…...
NVM安装、配置环境、简单使用
nvm 是Node.js 的版本管理工具，可以在同一台电脑上安装多个Node.js版本灵活切换。 安装# sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 其中0.39.0可以替换为当前最新的版本号。 配置环境变量# cd ~touch .bash_profile…...
【SPSS】数据预处理基础教程（附案例实战）
🤵♂️ 个人主页：艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞Ǵ…...
某饿了么APP最新版逆向分析（二）：加密参数初探
二、分析加密参数 说做就做，这边用的python进行模拟请求 万事俱备只欠东风，点击run 发现报错了 怎么回事？ 明明请求的内容和抓包的内容完全一致 怎么没有返回我们想要的数据 报错内容为参数错误 因此我就想可能是请求体有参数加密 我…...
程序的编译与链接（预处理详解）+百度面试笔试题+《高质量C/C++编程指南》笔试题
本篇重点介绍程序的编译与链接过程中的预处理阶段，将详细的介绍在预处理阶段会发生什么，以及讲解有关百度该内容的面试笔试题和源于《高质量C/C编程指南》的笔试题。一.【预处理详解】①预定义符号②#define2.1 #define 定义标识符注意：2.2 #…...
全解析 ESM 模块语法，出去还是进来都由你说了算
模块语法是ES6的一个重要特性，它的出现让JavaScript的模块化编程成为了可能。 在JavaScript中可以直接使用import和export关键字来导入和导出模块，但是这种语法并不是ES6的标准，而是ESM（ECMAScript Module）模块语法的…...
MATLAB 粒子群算法
✅作者简介：人工智能专业本科在读，喜欢计算机与编程，写博客记录自己的学习历程。 🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心&…...
java微信小程序音乐播放器分享系统
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时进行音乐播放器小程序的数据信息管理,特开发了基于音乐播放器小程序…...
VS各版本VC各版本对应关系
Visual Studio 经过多年的发展，有许多版本，经常我们在拿到一份代码时不知道对应的VS版本 这时候可以打开工程目录下的vcproj/vcxproj文件，如下所示 <?xml version"1.0" encoding"utf-8"?> <Project DefaultT…...
如何处理“WLAN没有有效的IP配置”这一问题？
🚀write in front🚀 📜所属专栏：暂无 🛰️博客主页：睿睿的博客主页 🛰️代码仓库：🎉VS2022_C语言仓库 🎡您的点赞、关注、收藏、评论，是对我最大的…...
ElasticSearch-学习笔记05【SpringDataElasticSearch】
Java后端-学习路线-笔记汇总表【黑马程序员】ElasticSearch-学习笔记01【ElasticSearch基本介绍】【day01】ElasticSearch-学习笔记02【ElasticSearch索引库维护】ElasticSearch-学习笔记03【ElasticSearch集群】ElasticSearch-学习笔记04【Java客户端操作索引库】【day02】Ela…...
【GlobalMapper精品教程】045：空间操作(2)——相交(Intersect)
GlobalMapper提供的空间分析（操作）的方法有：交集、并集、单并集、差异、对称差集、相交、重叠、接触、包含、等于、内部、分离等，本文主要讲述相交工具的使用。 文章目录 一、实验数据二、符号化设置三、相交运算四、结果展示五、心灵感悟一、实验数据 加载配套实验数据（…...
Android 一体机研发之修改系统设置————自动锁屏
Android 一体机研发之修改系统设置————屏幕亮度 Android 一体机研发之修改系统设置————声音 Android 一体机研发之修改系统设置————自动锁屏 修改系统设置系列篇章马上开张了！ 本章将为大家细节讲解自动锁屏。 自动锁屏功能，这个可以根据…...
七天实现一个go rpc框架
目录rpc协议目的关于RPC和框架服务端与消息编码确保接口的实现消息的序列化与反序列化通信过程服务端的实现main 函数支持并发与异步的客户端Call 的设计实现客户端服务注册(service register)通过反射实现 service集成到服务端超时处理创建连接超时Client.Call 超时服务端处理…...
EMQX Cloud Serverless 正式上线：三秒部署、按量计费的 MQTT Serverless 云服务
近日，全球领先的开源物联网数据基础设施软件供应商 EMQ 正式发布了 MQTT Serverless 云服务 —— EMQX Cloud Serverless 的 Beta 版本，开创性地采用弹性多租户技术，用户无需关心服务器基础设施和服务规格伸缩所需资源，仅用三秒即…...
快速排序 容易理解的版本
package huaweiod.排序算法;import java.util.Arrays;public class 快速排序 {public static void main(String[] args) {int[] arr {9,8,3,5,6,7,8,9};mysort(arr, 0, arr.length - 1); // myprint(arr," ");}private static void myprint(int[] arr, Strin…...
Linux体系结构
Linux体系结构一、引入概念二、内核三、管理1、内存管理2、进程管理3、进程调度控制进程对CPU的访问4、设备驱动程序和网络接口四、Linux Shell五、磁盘分区硬盘内的分区Linux下磁盘分区和目录的关系一、引入 操作系统的本质是什么？ 是一种管理(协调)资源机制&…...
【汽车电子】什么是ADAS？
文章目录ADAS——先进驾驶辅助系统ADAS——商用车安全性能提升的利器总结ADAS——先进驾驶辅助系统 ADAS，全称Advanced Driver Assistance Systems ，“先进驾驶辅助系统”，adas是汽车上面的一种系统，中文名叫做高级驾驶辅助系统&…...
java: 错误: 不支持发行版本 5（快速解决办法）
目录 前言 一、出现报错 二、报错的原因 三、解决办法 四、解决成功 前言 在maven web项目上面要部署运行tomcat时候，会出现这个问题 一、出现报错 java: 错误: 不支持发行版本 5 二、报错的原因 （1）官方解释：这个错误…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
)
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...