❤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(推荐)

在这里插入图片描述

背景虚化backdrop-filter

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

主要使用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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python requests网络库源码分析(第三篇:通过学习异常模块,了解http协议)

前言 作者在requests包下&#xff0c;定义了exceptions模块&#xff0c;该模块中定义执行http请求过程中常见的错误&#xff0c;熟悉这些错误有助于我们写出健壮的业务程序&#xff0c;同时还能温习http的知识点&#xff0c;本文基于的requests版本为2.27.1 exceptions模块&…

Sectigo多域名通配符证书区别买一年送一个月

Sectigo是国际知名CA认证机构之一&#xff0c;旗下有多种SSL数字证书&#xff0c;如单域名SSL证书、多域名SSL证书、通配符SSL证书、IP证书、多域名通配符SSL证书等。Sectigo旗下的多域名通配符证书有两种&#xff0c;它们在保护的域名类型和数量上存在一定差异&#xff0c;今天…

学校门禁监控,怎么管理更高级?

随着社会的不断发展和科技的飞速进步&#xff0c;安全管理成为各个领域不可或缺的重要环节。在这一安全管理体系中&#xff0c;门禁监控系统扮演着至关重要的角色&#xff0c;为组织、企业和机构提供了先进的、智能化的安全解决方案。 因此&#xff0c;门禁监控系统不仅仅是简单…

Linux简介

Unix的特点&#xff1a; Unix很简洁&#xff0c;Unix只提供几百个系统调用&#xff0c;并且每个调用都有明确的目的。一切皆文件&#xff0c;对数据和对文件都是通过相同的系统调用接口&#xff1a;open&#xff08;&#xff09;&#xff0c;read&#xff08;&#xff09;&…

应用监控 eBPF 版:实现高效协议解析的技术探索

作者&#xff1a;彦鸿 引言 随着 Kuberentes 等云原生技术的飞速发展&#xff0c;带来了研发与运维模式的变革。企业软件架构由单体服务向分布式、微服务演进。随着业务发展&#xff0c;多语言、多框架、多协议的微服务在企业中越来越多&#xff0c;软件架构复杂度越来越高&a…

谈谈 RocketMQ 5.0 分级存储背后一些有挑战的技术优化

作者&#xff1a;斜阳 RocketMQ 5.0 提出了分级存储的新方案&#xff0c;经过数个版本的深度打磨&#xff0c;RocketMQ 的分级存储日渐成熟&#xff0c;并成为降低存储成本的重要特性之一。事实上&#xff0c;几乎所有涉及到存储的产品都会尝试转冷降本&#xff0c;如何针对消…

火灾监测识别摄像机

火灾监测识别摄像机是一种基于视觉识别技术的智能设备&#xff0c;旨在实时监测并识别火灾&#xff0c;及时报警并提供相关数据支持&#xff0c;以提高火灾应急响应和减少火灾灾害损失。 火灾监测识别摄像机利用高清摄像头和先进的图像处理技术&#xff0c;能够对室内和室外环境…

解决Android Studio gradle下载超时和缓慢问题(win10)

解决超时问题 一般配置阿里云代理就可以解决。 具体配置方法&#xff0c;参考&#xff1a;https://blog.csdn.net/zhangjin1120/article/details/121739782 解决下载缓慢问题 直接去腾讯云镜像下载&#xff1a; https://mirrors.cloud.tencent.com/gradle/ 下载好了之后&…

Oracle2-Rollup和Cube用法

在Oracle的聚合函数中&#xff0c;会有按照维度统计的情况,比如上图按照job 和 deptno统计 sal的sum 但是也会遇到同时要求统计只按照job维度统计的情况&#xff0c;并且做到一张表里 1 union 来实现维度不一致 首先反应过来的是分两步查询&#xff0c;再讲结果union起来 s…

快速上手的AI工具-文心一言绘本创作

前言 大家好晚上好&#xff0c;现在AI技术的发展&#xff0c;它已经渗透到我们生活的各个层面。对于普通人来说&#xff0c;理解并有效利用AI技术不仅能增强个人竞争力&#xff0c;还能在日常生活中带来便利。无论是提高工作效率&#xff0c;还是优化日常任务&#xff0c;AI工具…

使用Python和PyTorch库构建一个简单的文本分类大模型:

在当今的大数据时代&#xff0c;文本分类任务在许多领域都有着广泛的应用&#xff0c;如情感分析、垃圾邮件过滤、主题分类等。为了有效地处理这些任务&#xff0c;我们通常需要构建一个强大的文本分类模型。在本篇博客中&#xff0c;我们将使用Python和PyTorch库来构建一个简单…

composer安装hyperf后,nginx配置hyperf

背景 引入hyperf项目用作微服务&#xff0c;使用composer 安装hyperf后&#xff0c;对hyperf进行nginx配置。 配置步骤 因为hyperf监听的是端口&#xff0c;不像其他laravel、lumen直接指向文件即可。所有要监听端口号。 1 配置nginx server {listen 80;//http&#xff1a…

[GDMEC-无人机遥感研究小组]无人机遥感小组-000-数据集制备

基于labelme的无人机语义分割数据集制备 文章目录 基于labelme的无人机语义分割数据集制备1. 数据获取2. 安装labelme3.利用labelme进行标注 1. 数据获取 数据集制备需要利用无人机飞行并采集标注。使用录制模式&#xff0c;镜头垂直向下进行拍摄&#xff0c;得到DJI_XXXX.MP4…

linux基础指令【中篇】

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 补充上篇的细节1.sta…

2023龙信杯wp

打了好像70多分&#xff0c;没拿奖&#xff0c;因为一些众所周知的原因&#xff0c;复盘间隔时间太长了没什么印象了已经 案情简介 2023年9月&#xff0c;某公安机关指挥中心接受害人报案:通过即时通讯工具添加认识一位叫“周微”的女人&#xff0c;两人谈论甚欢&#xff0c;确…

配网行波型故障预警定位装置:电力系统的安全守护神

随着科技的不断发展&#xff0c;电力系统的运行和管理已经越来越依赖于先进的技术手段。在这个领域中&#xff0c;配网行波型故障预警定位装置(也被称为智能电网监测设备)已经成为了一种重要的技术装备。它能够实时监测电力系统的运行状态&#xff0c;及时发现并预警故障&#…

VI / VIM的使用

vi/vim 的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是 vim 是 vi 的升级版本&#xff0c;它不仅兼容 vi 的所有指令&#xff0c;而且 还有一些新的特性在里面。例如语法加亮&#xff0c;可视化操作不仅可以在终端运行&#xff0c;也可以运行于 x win…

Leetcode25-上升下降字符串(1370)

1、题目 给你一个字符串 s &#xff0c;请你根据下面的算法重新构造字符串&#xff1a; 从 s 中选出 最小 的字符&#xff0c;将它 接在 结果字符串的后面。 从 s 剩余字符中选出 最小 的字符&#xff0c;且该字符比上一个添加的字符大&#xff0c;将它 接在 结果字符串后面。…

from sklearn.preprocessing import LabelEncoder的详细用法

sklearn.preprocessing 0. 基本解释1. 用法说明2. python例子说明 0. 基本解释 LabelEncoder 是 sklearn.preprocessing 模块中的一个工具&#xff0c;用于将分类特征的标签转换为整数。这在许多机器学习算法中是必要的&#xff0c;因为它们通常不能处理类别数据。 1. 用法说…

进程通信与socket编程实践之猜数字小游戏

socket是实现进程通信的一种重要方式&#xff0c;本文将通过socket编程实现服务器进程与客户端进程之间的通信&#xff0c;并在通信之外实现猜数字的小游戏。 1. 设计思路 本文设计的C/S结构的猜数字游戏功能如下&#xff1a;服务器端自动生成一个1-100之间的随机数字&#x…