❤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作为一款功能强大、稳定可靠的视频播放器…
阅读更多...
没指定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. 前言 我们在平时开发过程中关注的比较多的是项目开发时依赖包的版本以…
阅读更多...
数据结构（绪论+算法的基本概念）

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

文章目录 一、绪论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;当发生除不尽的情况时&…
阅读更多...
领域驱动设计（Domain-Driven Design DDD)——通过重构找到深层次模型1

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

一、概述 重构就是在不改变软件功能的前提下重新设计它。开发人员无需在着手开发之前做出详细的设计决策&#xff0c;只需要在开发过程中不断小幅调整设计即可&#xff0c;这不但能够保证软件原有的功能不变&#xff0c;还可使整个设计更加灵活易懂。 我们面临的真正挑战是找到…
阅读更多...
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是被连接的状态。 四次挥手…
阅读更多...
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…
阅读更多...
应急响应红蓝工程师白帽子取证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里面里面提供…
阅读更多...
源码篇--Redis 五种数据类型

源码篇--Redis 五种数据类型

文章目录 前言一、 字符串类型&#xff1a;1.1 字符串的编码格式&#xff1a;1.1.1 raw 编码格式:1.1.2 empstr编码格式:1.1.3 int 编码格式:1.1.4 字符串存储结构展示: 二、 list类型&#xff1a;2.1 List 底层数据支持&#xff1a;2.2 List 源码实现&#xff1a;2.3 List 结构…
阅读更多...
微信小程序-04

微信小程序-04

rpx&#xff08;responsive pixel&#xff09;是微信小程序独有的&#xff0c;用来解决屏适配的尺寸单位。 import 后跟需要导入的外联样式表的相对路径&#xff0c;用 ; 表示语句结束。 定义在 app.wxss 中的样式为全局样式&#xff0c;作用于每一个页面。 在页面的 .wxss 文…
阅读更多...
独享http代理安全性是更高的吗？

独享http代理安全性是更高的吗？

不同于共享代理&#xff0c;独享代理IP为单一用户提供专用的IP&#xff0c;带来了一系列需要考虑的问题。今天我们就一起来看看独享代理IP的优势&#xff0c;到底在哪里。 我们得先来看看什么是代理IP。简单来说&#xff0c;代理服务器充当客户机和互联网之间的中间人。当你使用…
阅读更多...
幻兽帕鲁一键开私服？超简单小白教程一看就会！

幻兽帕鲁一键开私服？超简单小白教程一看就会！

如何自建幻兽帕鲁服务器&#xff1f;基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了&#xff0c;一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程…
阅读更多...
Python学习之路-Django基础:PythonWeb

Python学习之路-Django基础:PythonWeb

Python学习之路-Django基础:PythonWeb Python Web 框架要点 处理流程 图片来源于未来的小牛的CSDN博客 意义 用于搭建Web应用程序&#xff0c;免去不同Web应用相同代码部分的重复编写&#xff0c;只需关心Web应用核心的业务逻辑实现 Web应用程序的本质 接收并解析HTTP请求…
阅读更多...
HCIA学习作业三

HCIA学习作业三

要求&#xff1a; 拓扑图&#xff1a; <AR1>ping 5.5.5.1 <AR1>display ip interface brief <AR1>display ip routing-table <AR1>display ip routing-table protocol static <AR2>ping 5.5.5.1 <AR2>display ip interface brief <…
阅读更多...
Linux实现：从倒计时到进度条

Linux实现：从倒计时到进度条

文章目录 1.回车与换行2.缓冲区的概念3.倒计时4.进度条(第一版无应用场景)5.进度条(第二版有应用场景) 1.回车与换行 2.缓冲区的概念 强制刷新可以使用冲刷函数fflush #include <stdio.h> #include <unistd.h> int main() {printf("I am a \nhandsome man!&q…
阅读更多...
排序（1）——直接插入排序、希尔排序

排序（1）——直接插入排序、希尔排序

目录 一、直接插入排序 1.简介 2.思路与代码 3.复杂度与稳定性分析 &#xff08;1&#xff09;时间复杂度 &#xff08;2&#xff09;空间复杂度 &#xff08;3&#xff09;稳定性 二、希尔排序 1.简介 2.思路与代码 &#xff08;1&#xff09;分组排序 &#xff08…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023