css实现渐进中嵌套渐进的方法

 这是我们想要的实现效果:

思路:

1.有一个底色的背景渐变 

2.需要几个小的块级元素做绝对定位通过渐变+filter模糊来实现

注意:这里的采用的定位方法,所以在内部的元素一律要使用绝对定位,否则会出现层级的问题,z-index只有在定位元素有效。

参考代码:

<view class="position-relative border-rd-20rpx mb-28rpx h-350rpx"style="background: linear-gradient(0deg, #FFE7B7 0%, #FF663C 100%);overflow: hidden;"><view class="h-100%"><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(30deg);"class="w-150rpx top-28rpx h-100rpx left--20rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);"class="w-150rpx top--80rpx h-100rpx right-36rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background:#FF2F2F;border-radius: 50% / 40%;filter: blur(10px);transform: rotate(-90deg);"class="w-150rpx top--10rpx h-80rpx right--60rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);"class="w-70rpx top-80rpx h-70rpx right--30rpx mt-20rpx position-absolute z-index:-1"></view></view></view>

 

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

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

相关文章

ctfshow-web入门-文件上传(web164、web165)图片二次渲染绕过

web164 和 web165 的利用点都是二次渲染&#xff0c;一个是 png&#xff0c;一个是 jpg 目录 1、web164 2、web165 二次渲染&#xff1a; 网站服务器会对上传的图片进行二次处理&#xff0c;对文件内容进行替换更新&#xff0c;根据原有图片生成一个新的图片&#xff0c;这样…

【Linux】进程优先级 + 环境变量

前言 在了解进程状态之后&#xff0c;本章我们将来学习一下进程优先级&#xff0c;还有环境变量等。。 目录 1.进程优先级1.1 为什么要有优先级&#xff1f; 2.进程的其他概念2.1 竞争性与独立性2.2 并行与并发2.3 进程间优先级的体现&#xff1a;2.3.1 O(1) 调度算法&#xf…

数字高压表0-30kv

最近在制作数字高压表&#xff0c;自己DIY玩玩&#xff0c;有没有朋友一起研究看看

SpringCloud--常用组件和服务中心

常用组件 Euroke和nacos 区别 负载均衡 负载均衡策略有哪些 自定义负载均衡策略

【Red Hat 4.6---详细安装Oracle 19c】---静默方式安装

&#x1f53b; 一、安装前规划 规划项:(本环境) 描述:操作系统版本Red Hat Enterprise Linux Server release 4.6 (Santiago)主机名langtest数据库版本 Oracle 19c IP规划10.10.10.164服务器空间要求根据实际要求数据库名/实例名orcl数据库块大小oracle建库一般设置数据库块大…

物业系统自主研发接口测试框架

1、自主研发框架整体设计 1.1、什么是测试框架? 在了解什么是自动化测试框架之前&#xff0c;先了解一下什么叫框架?框架是整个或部分系统的可重用设计&#xff0c;表现为一组抽象构件及构件实例间交互的方法;另一种定义认为&#xff0c;框架是可被应用开发者定制的应用骨架…

Redis 主从复制,集群与高可用

虽然Redis可以实现单机的数据持久化&#xff0c;但无论是RDB也好或者AOF也好&#xff0c;都解决不了单点宕机问题&#xff0c;即一旦单台 redis服务器本身出现系统故障、硬件故障等问题后&#xff0c;就会直接造成数据的丢失 此外,单机的性能也是有极限的,因此需要使用另外的技…

捷配生产笔记-细间距芯片的表面处理工艺:OSP与沉金工艺的重要性

在现代电子制造领域&#xff0c;随着技术的进步&#xff0c;电子设备变得越来越小型化和高性能化。细间距芯片作为实现这一目标的关键组件&#xff0c;其制造工艺要求极为严格。在这些要求中&#xff0c;表面处理工艺尤为关键&#xff0c;因为它直接影响到芯片的焊接质量和长期…

实验7 数据查询(2)

一、实验目的 学习SQL语言的定义、操纵功能熟悉通过SQL语言对数据库进行查询操作&#xff0c;包括单表查询、多表查询、嵌套查询、集合查询 二、实验软件 MySQL三、实验内容和要求 给定四个关联表&#xff0c;其定义和数据加载如下&#xff1a; 学生表 Student create tab…

Cesium中实现图层组

图层组 某天领导找我&#xff0c;说业务中可能存在多个影像服务为一个图层组&#xff0c;并且需要同时加载和同时在图层列表中上下移动的需求。 例如一些专题地图&#xff0c;包含所有学校、医院、公交站等图层&#xff0c;而这些图层都是单独发布的。 在 Cesium 中确实存在…

前端与嵌入式开发通信之QWebChannel(Qt)

前端与嵌入式开发通信之QWebChannel 最近开发中需要用到和c开发的操作台进行通信的的需求&#xff0c;就找到了这个技术&#xff0c;记录一下 首先需要安装导入 qwebchannel npm i qwebchannel import { QWebChannel } from "qwebchannel"; 初始化qwebchannel并封…

myeclipse开发ssm框架项目图书管理系统 mysql数据库web计算机毕业设计项目

摘 要 随着计算机的广泛应用&#xff0c;其逐步成为现代化的标志。图书馆的信息量也会越来越大&#xff0c;因此需要对图书信息、借书信息、还书信息等进行管理&#xff0c;及时了解各个环节中信息的变更&#xff0c;要对因此而产生的单据进行及时的处理&#xff0c;为了提高高…

智充科技营收增速放缓:经营成本飙升,应收账款大幅增长

《港湾商业观察》黄懿 6月10日&#xff0c; XCHG Limited 智能充电有限公司(下称&#xff1a;智充科技)在美国证监会(SEC)更新招股书&#xff0c;拟在美国纳斯达克上市&#xff0c;其股票代码为“XCH”。北京智充科技有限公司为其国内运营主体&#xff08;下称“北京智充科技”…

Linux-shell编程入门基础

文章目录 前言Shell编程bash特性shell作用域变量环境变量$特殊变量$特殊状态变量 $特殊符号(很重要)其他内置shell命令shell语法的子串截取统计 指令执行时间练习shell特殊扩展变量父子shell的理解内置和外置命令区别 数值计算双括号(())运算letexprexpr模式匹配 bcawk中括号 s…

数据结构(Java):Stack相关OJ习题

1、括号匹配问题 . - 力扣&#xff08;LeetCode&#xff09; 1.1 思路分析 根据栈的先进后出原则&#xff0c;我们可以这样解决问题&#xff1a; 遍历字符串&#xff0c;遇见左括号就将左括号push入栈&#xff1b;遇见右括号就pop出栈&#xff0c;将出栈的元素和该右括号比较…

最简单的vue3组件之间传值

localStorage 是 HTML5 引入的一个 Web Storage API 的一部分&#xff0c;它允许网页在用户的浏览器上存储数据。localStorage 提供了一种持久化的本地存储方案&#xff0c;数据不会因为浏览器关闭而丢失&#xff0c;除非用户或脚本显式地删除它们。 localStorage 是一种非常实…

批量提取网页表格内容至excel文件

问题背景 将网页的表格内容&#xff08;5237个股票信息&#xff09;复制粘贴到excel文件中 网址&#xff1a;A股上市公司名单-A股上市公司名录-A股上市公司大全-商业计划书-可研报告-中商产业研究院数据库-中商情报网 实现代码 # 导入包 import pandas as pd import time# 创…

超越传统:3D生物打印如何利用扩散创造奇迹?

超越传统&#xff1a;3D生物打印如何利用扩散创造奇迹&#xff1f; 组织工程和再生医学领域迫切需要能够模拟人体组织结构和功能的体外模型和组织替代物。然而&#xff0c;传统的体外模型和组织替代物往往难以满足高度特异性、复杂性和功能性的要求。3D生物打印技术应运而生&a…

Base64文件流查看下载PDF方法-CSDN

问题描述 数票通等接口返回的PDF类型发票是以Base64文件流的方式返回的&#xff0c;无法直接查看预览PDF发票&#xff0c; 处理方法 使用第三方在线工具&#xff1a;https://www.jyshare.com/front-end/61/ 在Html代码框中粘贴如下代码 <embed type"application/pd…

技术开发分享:商品详情APP原数据实时接口代码解析

商品详情app端原数据实时接口代码解析主要包括以下几个步骤&#xff1a; 获取商品ID&#xff1a;首先需要从淘宝的分享链接中提取商品ID&#xff0c;可以通过正则表达式匹配的方式获取。 构建请求URL&#xff1a;根据商品ID构建请求URL&#xff0c;通常包括淘宝的商品详情API地…