当前位置: 首页 > news >正文

❤css实用

❤ css实用

渐变色边框(Gradient borders方法的汇总 5种)

给 border 设置渐变色是很常见的效果,实现这个效果有很多思路

1、使用 border-image

使用 css 的 border-image 属性给 border 绘制复杂图样
与 background-image 类似,我们可以在 border 中展示image和linear-gradient。
通过 border-image 设置渐变色 border 是最简单的方法,只需要两行代码:

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

效果:
在这里插入图片描述

缺陷:不支持设置 border-radius

2、使用 background-image

使用 background-image 绘制渐变色背景,并且把中间用纯色遮住应该是最容易想到的一种方法。

思路:使用两个盒子叠加,给下层的盒子设置渐变色背景和 padding,给上层盒子设置纯色背景。

背景虚化backdrop-filter

主要使用CSS的backdrop-filter属性,backdrop-filter属性可以对元素的背景进行模糊处理。

1、将要应用背景虚化效果的元素的position属性设置为relativeabsolute,以便能够使用z-index属性。
2、使用::before::after伪元素来创建一个与元素相同大小的伪元素,并将其position属性设置为absolutetopleft属性设置为0,z-index属性设置为-1,以确保伪元素在元素的下方
3、接下来,为伪元素设置背景图片,并使用backdrop-filter属性将背景进行虚化。可以使用blur()函数来设置模糊程度,也可以使用其他滤镜函数组合来实现更多效果。
4、使用content属性将伪元素的内容设置为空字符串。

效果:
在这里插入图片描述
代码部分
代码地址

<style>.element {position: relative;width: 300px;height: 200px;overflow: hidden;padding: 20px;box-sizing: border-box;}.element::before {content: "";position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-image: url('https://img0.baidu.com/it/u=3855103837,344140545&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400');backdrop-filter: blur(5px);/* 虚化程度 */}.element::after {content: "";position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.5);/* 虚化后的背景颜色 */backdrop-filter: blur(5px);/* 虚化程度 */}</style><div><div class="element"><div class="centerbox" style="width:100%;height: 100%;"><img src="https://img0.baidu.com/it/u=3855103837,344140545&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" alt="" style="width:100%;height: 100%;"></div></div></div>

相关文章:

❤css实用

❤ css实用 渐变色边框&#xff08;Gradient borders方法的汇总 5种&#xff09; 给 border 设置渐变色是很常见的效果&#xff0c;实现这个效果有很多思路 1、使用 border-image 使用 css 的 border-image 属性给 border 绘制复杂图样 与 background-image 类似&#xff0c;我…...

web系统架构基于springCloud的各技术栈

博主目前开发的web系统架构是基于springCloud的一套微服务架构。 使用的技术栈&#xff1a;springbootmysqlclickhousepostgresqlredisrocketMqosseurekabase-gatewayapollodockernginxvue的一套web架构。 一、springboot3.0 特性&#xff1a;Spring Boot 3.0提供了许多新特性…...

【第十五课】数据结构:堆 (“堆”的介绍+主要操作 / acwing-838堆排序 / 时间复杂度的分析 / c++代码 )

目录 关于堆的一些知识的回顾 数据结构&#xff1a;堆的特点 "down" 和 "up"&#xff1a;维护堆的性质 down up 数据结构&#xff1a;堆的主要操作 acwing-838堆排序 代码如下 时间复杂度分析 确实是在写的过程中频繁回顾了很多关于树的知识&…...

el-select选项过多导致页面卡顿,路由跳转卡顿

问题&#xff1a;el-select数据量太大&#xff0c;导致渲染过慢&#xff0c;或造成页面卡顿甚至于卡死 卡顿原因&#xff1a;DOM中数据过多&#xff0c;超过内存限制 解决方法&#xff1a; 1.使用Virtualized Select 虚拟化选择器&#xff0c;页面就不卡了 2.el-select做分…...

信息流广告参数回传工具怎么做联调

信息流广告在抖音等平台上越来越受到广告主的青睐&#xff0c;它能够在用户浏览内容的同时&#xff0c;以自然的方式展示广告&#xff0c;提高曝光率和点击率。然而&#xff0c;为了更好地评估广告效果&#xff0c;需要进行参数回传联调。本文将介绍一种实用的工具——数灵通外…...

matlab appdesigner系列-常用18-表格

表格&#xff0c;常用来导入外部表格数据 示例&#xff1a; 导入外界excel数据&#xff1a;data.xlsx 姓名年龄城市王一18长沙王二21上海王三56武汉王四47北京王五88成都王六23长春 操作步骤如下&#xff1a; 1&#xff09;将表格拖拽到画布上 2&#xff09;对app1右键进行…...

密码学的100个基本概念

密码学作为信息安全的基础&#xff0c;极为重要,本文分为上下两部分&#xff0c;总计10个章节&#xff0c;回顾了密码学的100个基本概念&#xff0c;供小伙伴们学习参考。本文将先介绍前五个章节的内容。 一、密码学历史 二、密码学基础 三、分组密码 四、序列密码 五、哈希…...

Python中的进制转换——bin/oct/hex函数与int函数

简介 进制转换可能是一个工作学习中的常见小任务&#xff0c;手写相关函数显然很麻烦。 Python有相关内置函数一般能满足我们的需求。bin()、oct()、hex()将十进制转换为常用的二、八、十六进制&#xff0c;而 int()函数可指定第二个参数从而将其它进制转换为十进制。或许后者…...

RT-Thread 瑞萨 智能家居网络开发:RA6M3 HMI Board 以太网+GUI技术实践

不用放大了&#xff0c; 我在包里找到张不小的…… 以太网HMI线下培训-环境准备 这是社群的文档&#xff1a;【腾讯文档】以太网线下培训&#xff08;HMI-Board&#xff09; https://docs.qq.com/doc/DY0FIWFVuTEpORlNn 先介绍周六的培训是啥&#xff0c;然后再介绍一下要准…...

力扣刷题第十天 美丽塔 一

给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights[i] < maxHeights[i]heights 是一个 山脉…...

c# ADODB.Recordset实例调用Fields报错

代码&#xff1a; using System; using System.CodeDom; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using ADODB;namespace ConsoleApp1 {internal class Programre{static ADODB.Recordset recordsetInstance…...

windows和linux下SHA1,MD5,SHA256校验办法

今天更新android studio到Android Studio Hedgehog | 2023.1.1时&#xff0c;发现提示本机安装的git版本太老&#xff0c;于是从git官网下载最新的git。 git下载地址&#xff1a; https://git-scm.com/ 从官网点击下载最新windows版本会跳转到github仓库来下载发布的git&…...

高新技术企业申报需要具备哪些条件?

&#xff08;一&#xff09;企业申请认定时须注册成立一年以上&#xff1b; &#xff08;二&#xff09;企业通过自主研发、受让、受赠、并购等方式&#xff0c;获得对其主要产品&#xff08;服务&#xff09;在技术上发挥核心支持作用的知识产权的所有权&#xff1b; &#…...

测试不拘一格——掌握Pytest插件pytest-random-order

在测试领域,测试用例的执行顺序往往是一个重要的考虑因素。Pytest插件 pytest-random-order 提供了一种有趣且灵活的方式,让你的测试用例能够以随机顺序执行。本文将深入介绍 pytest-random-order 插件的基本用法和实际案例,助你摆脱固定的测试顺序,让测试更具变化和全面性…...

DophineScheduler通俗版

1.DophineScheduler的架构 ZooKeeper&#xff1a; AlertServer&#xff1a; UI&#xff1a; ApiServer&#xff1a; 一个租户下可以有多个用户&#xff1b;一个用户可以有多个项目一个项目可以有多个工作流定义&#xff0c;每个工作流定义只属于一个项目&#xff1b;一个租户可…...

企业如何稳步开启SASE实施之路

在上一篇题为《企业为什么选择SASE&#xff1f;香港电讯专家给你答案&#xff01;》的文章中&#xff0c;我们从SD-WAN的安全策略和能力、市场趋势的推动及SASE的四大特性分析了企业选择采用安全访问服务边缘&#xff08;SASE&#xff09;的原因。基于SASE的各项优势&#xff0…...

【Oracle】收集Oracle数据库内存相关的信息

文章目录 【Oracle】收集Oracle数据库内存相关的信息收集Oracle数据库内存命令例各命令的解释输出结果例参考 【声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。 编辑|SQL和数据库技术(ID:SQLplusDB) 【Oracle】收集Oracle数据库内存相关的信息 …...

MySQL也开始支持JavaScript了

2023 年 12 月 16 日&#xff0c;Oracle 公司在一篇名为 《Introducing JavaScript support in MySQL》的文章中宣布 MySQL 数据库服务器将开始支持 JavaScript 语言。 这个举措标志着继PostgreSQL之后&#xff0c; MySQL 也支持使用 JavaScript 编写函数和存储过程了。作为最…...

百度大脑 使用

百度大脑&#xff1a; 官方网址&#xff1a;https://ai.baidu.com/ 文档中心&#xff1a;https://ai.baidu.com/ai-doc 体验中心&#xff1a;https://ai.baidu.com/experience 百度大脑则是百度AI核心技术引擎&#xff0c;它包括基础层、感知层、认知层和安全&#xff0c;是百…...

Spring Boot 中的外部化配置

Spring Boot 中的外部化配置 一、配置文件基础1.配置文件格式&#xff08;1&#xff09;YAML 基本语法规则&#xff08;2&#xff09;YAML 支持三种数据结构 2.application 文件3.application.properties 配置文件4.application.yml 配置文件5.Environment6.组织多文件7.多环境…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...