❤css实用

❤ css实用

CSS渐变色边框（Gradient borders方法的汇总 5种-代码可直接下载）

资源链接
https://download.csdn.net/download/weixin_43615570/88779950?spm=1001.2014.3001.5503

给 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 绘制渐变色背景，中间用纯色div块遮住应该是最容易想到的一种方法。

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

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

代码部分

<style>body {padding: 300px;box-sizing: border-box;}.border-bg {width: 300px;height: 100px;padding: 4px;background: linear-gradient(to right, #8f41e9, #578aef);border-radius: 16px;}.content {height: 100%;background: #fff;border-radius: 13px;padding: 20px;box-sizing: border-box;/*trciky part*/}</style><div class="border-bg"><div class="content">内层的容器</div>
</div>

优点：容易理解，兼容性好
缺点：设置 content 的 border-radius 会比较 tricky，且不准确。

代码链接：

3、两层元素、background-image、background-clip

可以解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。(注意 border-radius: inherit; 这里原本的并不能生效)

重要的两句代码效果

background-clip 属性用于指定背景图片的绘制区域。它有以下几个可选值：
border-box：背景绘制区域是包含边框和内边距的区域（默认值）。
padding-box：背景绘制区域是包含内边距的区域。
content-box：背景绘制区域是内容区域。

(1) 
background-clip: padding-box;当设置 background-clip: padding-box 时，
1. 背景图片将被限制在元素的内边距区域内。
2. 也就是说，背景图片不会超出元素的内边距区域，而边框区域和内容区域则没有背景图片
3. 这种情况下，如果元素存在边框或外边距，则背景图片不会延伸到它们之间的空间。(2) 
border-radius: inherit;作用是继承父元素的 border-radius 值，并应用于当前元素。
当你在子元素上设置 border-radius: inherit; 时
子元素会继承父元素的圆角效果。这样可以确保子元素的边角与父元素保持一致，创建出一致的外观。

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

 <style>body {padding: 300px;box-sizing: border-box;position: relative;} .border-box1 {position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;/* margin: -4px;*//* border-radius: inherit;  */border-radius: 16px; /*important*/width: 100%;height: 100%;box-sizing: border-box;background: linear-gradient(to right, #8f41e9, #578aef);}.border-box2 {width: 100%;height: 100%;border: 4px solid transparent;border-radius: 16px;position: relative;box-sizing: border-box;background-color: #222;background-clip: padding-box; /*important*/} </style><div style="position:relative;left: 100px;top: 100px;width: 300px;height: 100px"><div class="border-box1"></div><div class="border-box2">内层 </div> </div>

4、 伪元素（推荐）

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

代码部分

<div><div class="box">内层</div>
</div>body {padding: 300px;box-sizing: border-box;position: relative;}.box {position: relative;width: 300px;height: 200px;background-color: #fff;border: 10px solid transparent;border-radius: 20px;background-clip: padding-box;}.box::before {content: '';position: absolute;top: -10px;left: -10px;right: -10px;bottom: -10px;z-index: -1;background: linear-gradient(to right, #8f41e9, #578aef);border-radius: inherit;}
</style>

点击无需积分即可下载

5、单层元素、background-clip、background-origin、background-image（推荐）

在这里插入图片描述

CSS背景虚化backdrop-filter

资源链接 https://download.csdn.net/download/weixin_43615570/88776941

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

1、将要应用背景虚化效果的元素的position属性设置为relative或absolute，以便能够使用z-index属性。
2、使用::before或::after伪元素来创建一个与元素相同大小的伪元素，并将其position属性设置为absolute，top、left属性设置为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实现背景图片全屏铺满自适应

① background-attachment:fixed;

效果：

<style>body{padding: 0;margin:0px;background: url('https://img1.baidu.com/it/u=2386402004,1368557636&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=227') no-repeat;background-size:100% 100%;background-attachment:fixed;}
</style>

② 高度可以设置为 height:100vh;来进行调整

body{padding: 0;margin:0px;background: url('https://img1.baidu.com/it/u=2386402004,1368557636&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=227') no-repeat;height:100%;width:100%;overflow: hidden;background-size:cover;/*或者background-size:100%;*/}

③ 背景图覆盖（推荐）

body{ /* 加载背景图 */background-image: url('https://img1.baidu.com/it/u=2386402004,1368557636&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=227');/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸缩 */background-size: cover;/* 设置背景颜色，背景图加载过程中会显示背景色 */background-color: #464646;
}

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

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

相关文章

近20k stars，GSYVideoPlayer一款优秀的视频播放器

近20k stars，GSYVideoPlayer一款优秀的视频播放器

近20k stars&#xff0c;GSYVideoPlayer一款优秀的视频播放器 引言 在现代社会中&#xff0c;视频已经成为人们获取信息和娱乐的重要形式。为了提供更好的观看体验&#xff0c;开发一款优秀的视频播放器变得至关重要。而GSYVideoPlayer作为一款功能强大、稳定可靠的视频播放器…
阅读更多...
浙江机电职业技术学院第八届新生亮相赛（同步赛）D.一种很新的阶乘【线性筛+一分为二法】

浙江机电职业技术学院第八届新生亮相赛（同步赛）D.一种很新的阶乘【线性筛+一分为二法】

原题链接&#xff1a;https://ac.nowcoder.com/acm/contest/73799/D 时间限制&#xff1a;C/C 2秒&#xff0c;其他语言4秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 夜雷很喜欢特别大的数字&#xff0c;曾经一度算阶乘…
阅读更多...
没指定spring-boot-maven-plugin版本导致编译失败，这坑你踩过没

没指定spring-boot-maven-plugin版本导致编译失败，这坑你踩过没

文章目录 1. 前言2. 组件版本信息3. 事件经过3.1 本地通过maven命令打包3.2 定位问题步骤3.2.1 核对spring-boot-maven-plugin版本信息3.2.2 spring-boot-maven-plugin版本错误原因 3.3 解决方案 4.结论 1. 前言 我们在平时开发过程中关注的比较多的是项目开发时依赖包的版本以…
阅读更多...
lightdb object支持static函数

lightdb object支持static函数

文章目录 背景介绍语法示例 背景 在信创适配中&#xff0c;从Oracle迁移过来的程序使用STATIC函数。为此LightDB从24.1版本开始&#xff0c;对该功能进行了支持。 介绍 LightDB 24.1版本中对象方法包括下列几种&#xff1a; MEMBER方法&#xff1a;MEMBER方法可以被对象实例…
阅读更多...
数据结构（绪论+算法的基本概念）

数据结构（绪论+算法的基本概念）

文章目录 一、绪论1.1、数据结构的基本概念1.2、数据结构三要素1.2.1、逻辑结构1.2.2、数据的运算1.2.3、物理结构&#xff08;存储结构&#xff09;1.2.4、数据类型和抽象数据类型 二、算法的基本概念2.1、算法的特性2.2、“好”算法的特质2.2.1、算法时间复杂度2.2.2、算法空…
阅读更多...
java数学计算工具类 double精确的加法算法 double精确的减法算法

java数学计算工具类 double精确的加法算法 double精确的减法算法

java数学计算工具类 double精确的加法算法 double精确的减法算法 精确的乘法算法 对精确的除法运算&#xff0c;当发生除不尽的 保留小数、数值精度 精确的加法算法:2.27 精确的减法算法:0.01 精确的乘法算法:1.2882 相对精确的除法运算&#xff0c;当发生除不尽的情况时&…
阅读更多...
【WebGPU】简介和开始

【WebGPU】简介和开始

简介 WebGPU 是一种 API&#xff0c;用于在 Web 应用中访问 GPU 的功能。在 WebGPU 出现之前&#xff0c;有一个 WebGL&#xff0c;它提供了 WebGPU 的部分功能。它开创了一种新的富媒体 Web 内容类别&#xff0c;并且开发者也利用它构建了许多精彩的内容。不过&#xff0c;它…
阅读更多...
领域驱动设计（Domain-Driven Design DDD)——通过重构找到深层次模型1

领域驱动设计（Domain-Driven Design DDD)——通过重构找到深层次模型1

一、概述 重构就是在不改变软件功能的前提下重新设计它。开发人员无需在着手开发之前做出详细的设计决策&#xff0c;只需要在开发过程中不断小幅调整设计即可&#xff0c;这不但能够保证软件原有的功能不变&#xff0c;还可使整个设计更加灵活易懂。 我们面临的真正挑战是找到…
阅读更多...
【机器视觉实验】机器视觉实验四——基于knn的场景图像检索、基于SVM的人脸图像识别

【机器视觉实验】机器视觉实验四——基于knn的场景图像检索、基于SVM的人脸图像识别

一、实验内容 实验内容包含要进行什么实验，实验的目的是什么，实验用到的算法及其原理的简单介绍。 （1） 编程实现基于knn的场景图像检索 a) 至少实现三种特征组合进行检索； b) 使用recall与precision分析不同特征组合对检索精度的影响。 （2） 实现基于SVM的人脸图像识…
阅读更多...
java使用MD5加密

java使用MD5加密

java使用MD5加密 源字符串&#xff1a;三四五 使用 UTF-8字符集字符集加密后的结果为:f2615f1dab4520fc1e1a79ed6a4f7b37 用 GB2312 字符集加密后的结果为:1dbb006b41466197c486592727af516f 用 GBK 字符集加密后的结果为:1dbb006b41466197c486592727af516f
阅读更多...
TCP 状态转换以及半关闭

TCP 状态转换以及半关闭

TCP 状态转换&#xff1a; 上图中还没有进行握手的时候状态是关闭的。 三次握手状态的改变&#xff1a; 客户端发起握手。 调用 connect() 函数时状态转化为&#xff1a;SYN_SENT。调用 listen() 函数时状态转换为&#xff1a;LISTEN。ESTABLISHED是被连接的状态。 四次挥手…
阅读更多...
Python系列（7）—— 运算符的优先级

Python系列（7）—— 运算符的优先级

一、引言 在Python中&#xff0c;当一个表达式包含多个运算符时&#xff0c;运算符的优先级决定了这些运算符的执行顺序。高优先级的运算符会先于低优先级的运算符进行计算。了解和掌握运算符的优先级对于编写正确的Python代码至关重要。 二、Python中的运算符优先级 Python…
阅读更多...
2023-2024年广东省职业院校技能大赛信息安全管理与评估赛项规程

2023-2024年广东省职业院校技能大赛信息安全管理与评估赛项规程

2023-2024 年度广东省职业院校技能大赛“信息安全管理与评估”赛项规程 一、赛项名称 赛项编号&#xff1a;GZ032 赛项名称&#xff1a;信息安全管理与评估 英语翻译&#xff1a;Information Security Management and Evaluation 赛项组别&#xff1a;高职组 竞赛形式&am…
阅读更多...
httprunnerV4.X的基本使用详解

httprunnerV4.X的基本使用详解

目录 1、httprunner概述 1.1、httprunner的优点 2、httprunner的安装 3、基本命令的使用 3.1、生成脚手架 3.2、将har文件转换为测试用例文件 3.3、执行测试用例 3.4、为项目创建虚拟环境&#xff0c;然后安装httprunner库 3.4、执行测试用例生成测试报告 4、httprun…
阅读更多...
CSS 双色拼接按钮效果

CSS 双色拼接按钮效果

<template><view class="sss"><button> <!-- 按钮 --><view class="span"> 按钮 </view> <!-- 按钮文本 --></button></view></template><script></script><style>body {b…
阅读更多...
【Git】windows系统安装git教程和配置

【Git】windows系统安装git教程和配置

一、何为Git Git(读音为/gɪt/)是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 二、git安装包 有2种版本&#xff0c;Git for Windows Setup和Git for Windows Portable(便携版)两个版本都可以。 三、Git for Windows Por…
阅读更多...
js设计模式实例

js设计模式实例

js设计模式 设计模式&#xff08;Design pattern&#xff09;代表了最佳的实践&#xff0c;通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误…
阅读更多...
Linux命令-arj命令（用于创建和管理.arj压缩包）

Linux命令-arj命令（用于创建和管理.arj压缩包）

补充说明 arj命令 是 .arj 格式的压缩文件的管理器&#xff0c;用于创建和管理 .arj 压缩包。 语法 arj(参数)参数 操作指令&#xff1a;对 .arj 压缩包执行的操作指令压缩包名称&#xff1a;指定要操作的arj压缩包名称
阅读更多...
应急响应红蓝工程师白帽子取证Linux和windows入侵排查还原攻击痕迹，追溯攻击者，以及各种木马和病毒以及恶意脚本文件排查和清除

应急响应红蓝工程师白帽子取证Linux和windows入侵排查还原攻击痕迹，追溯攻击者，以及各种木马和病毒以及恶意脚本文件排查和清除

应急响应红蓝工程师白帽子取证Linux入侵排查还原攻击痕迹，追溯攻击者，以及各种木马和病毒以及恶意脚本文件排查和清除。 一般服务器被入侵的迹象，包括但不局限于：由内向外发送大量数据包（DDOS肉鸡）、服务器资源被耗尽（挖矿程序）、不正常的端口连接（反向shell等）、服务…
阅读更多...
Go 知识chan

Go 知识chan

Go 知识chan 1. 基本知识1.1 定义1.2 操作1.3 操作限定1.4 chan 读写 2. 原理2.1 数据结构2.2 环形队列2.3 等待队列2.4 类型消息2.5 读写数据2.6 关闭chan 3. 使用3.1 操作符使用3.2 select3.3 for-range https://a18792721831.github.io/ 1. 基本知识 chan是go里面里面提供…
阅读更多...
最新文章

Copyright @ 2022~2023