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.rhkb.cn/news/376048.html

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

相关文章

面试经验之谈

优质博文&#xff1a;IT-BLOG-CN ​通常面试官会把每一轮面试分为三个环节&#xff1a;① 行为面试 ② 技术面试 ③ 应聘者提问 行为面试环节 面试开始的5~10分钟通常是行为面试的时间&#xff0c;面试官会参照简历和你的自我介绍了解应聘者的过往经验和项目经历。由于面试官…

Hangfire发布托管到iis无法正常执行任务

本文以windowsServer2012R2iis8示例。 当我们设置了一个后台周期性任务后发布到iis&#xff0c;如果出现网站间隔时间较长没有用户去访问&#xff0c;这是iis可能就会自动回收导致Hangfire服务停止&#xff0c;导致我们的后台任务终止执行&#xff0c;直到进来一个请求&#xf…

基于全国产复旦微JFM7K325T+ARM人工智能数据处理平台

复旦微可以配合的ARM平台有&#xff1a;RK3588/TI AM62X/ NXP IMX.8P/飞腾FT2000等。 产品概述 基于PCIE总线架构的高性能数据预处理FMC载板&#xff0c;板卡采用复旦微的JFM7K325T FPGA作为实时处理器&#xff0c;实现各个接口之间的互联。该板卡可以实现100%国产化。 板卡具…

window下tqdm进度条

原代码是linux下运行&#xff0c;修改后可在window下运行。 #ifndef TQDM_H #define TQDM_H#include <chrono> #include <ctime> #include <numeric> #include <ios> #include <string> #include <cstdlib> #include <iostream> #i…

系统吃swap问题排查

目录 背景 问题 分析并解决 1.控制线程数 2.更换IO组件 3.Linux进程信息文件分析 总结加餐 参考文档 背景 隔壁业务组系统是简单的主从结构&#xff0c;写索引的服务(主)叫primary&#xff0c; 读索引并提供搜索功能的服务(从)叫replica。业务线同步数据并不是平滑的&…

【新书速递】使用MATLAB进行雷达系统分析和设计(第四版)(2022)

来源&#xff1a;公众号高山防务 一、目录 目录 1雷达定义和术语 1.1雷达系统分类和波段 1.1.1高频&#xff08;HF&#xff09;和甚高频&#xff08;VHF&#xff09;雷达&#xff08;A和B波段&#xff09; 1.1.2超高频&#xff08;UHF&#xff09;雷达&#xff08;C波段&am…

【学习css1】flex布局-页面footer部分保持在网页底部

中间内容高度不够屏幕高度撑不开的页面时候&#xff0c;页面footer部分都能保持在网页页脚&#xff08;最底部&#xff09;的方法 1、首先上图看显示效果 2、奉上源码 2.1、html部分 <body><header>头部</header><main>主区域</main><foot…

循环结构(一)——for语句【互三互三】

文章目录 &#x1f341; 引言 &#x1f341; 一、语句格式 &#x1f341; 二、语句执行过程 &#x1f341; 三、语句格式举例 &#x1f341;四、例题 &#x1f449;【例1】 &#x1f680;示例代码: &#x1f449;【例2】 【方法1】 &#x1f680;示例代码: 【方法2】…

通过git将文件push到github 远程仓库

1.先git clone 代码地址 git clone htttp://github.com/用户名/test.git 2. 添加文件 例如&#xff1a;touch 1.txt 3.将文件添加到暂存区 git add 1.txt 4.提交 git commit -m "commit 1.txt" 5.与远程仓库建立关联 git remote add 远程仓库名 远程仓库…

华为浏览器,Chrome的平替,插件无缝连接

文章目录 背景插件书签 背景 不知道各位小伙伴有没有这样的痛点&#xff0c;办公电脑、家里的电脑还有手机、平板等&#xff0c;收藏了一个网址或者在手机上浏览了某个网页&#xff0c;保存起来&#xff0c;可是一换平台或者换个电脑&#xff0c;在想要浏览之前收藏的东西&…

Elasticsearch 8 支持别名查询

在 Elasticsearch 8 中&#xff0c;使用 Java 高级 REST 客户端进行别名管理的过程与之前的版本类似&#xff0c;但有一些API细节上的变化。以下是如何使用 Java 和 Elasticsearch 8 进行别名操作的例子&#xff1a; 引入依赖 确保你的项目中包含了 Elasticsearch 的高级 RES…

iPad锁屏密码忘记怎么办?有什么方法可以解锁?

当我们在日常使用iPad时&#xff0c;偶尔可能会遇到忘记锁屏密码的尴尬情况。这时&#xff0c;不必过于担心&#xff0c;因为有多种方法可以帮助您解锁iPad。接下来&#xff0c;小编将为您详细介绍这些解决方案。 一、使用iCloud的“查找我的iPhone”功能 如果你曾经启用了“查…

亚马逊IP关联是什么?要怎么解决呢?

亚马逊不仅提供了广泛的商品和服务&#xff0c;也是许多企业和个人选择的电子商务平台。然而&#xff0c;与亚马逊相关的IP关联问题&#xff0c;特别是在网络安全和运营管理方面&#xff0c;经常成为使用亚马逊服务的用户和商家关注的焦点。通过了解亚马逊IP关联的含义、可能的…

数学建模国赛入门指南

文章目录 认识数学建模及国赛认识数学建模什么是数学建模&#xff1f;数学建模比赛 国赛参赛规则、评奖原则如何评省、国奖评奖规则如何才能获奖 国赛赛题分类及选题技巧国赛赛题特点赛题分类 国赛历年题型及优秀论文 数学建模分工技巧数模必备软件数模资料文献数据收集资料收集…

单点登录(SSO)机制

1、定义 单点登录&#xff08;Single Sign On&#xff09;&#xff0c;简称为 SSO&#xff0c;SSO的定义是指用户只需要登录一次就可以访问所有相互信任的应用系统。 eg:淘宝、天猫都属于阿里旗下&#xff0c;当用户登录淘宝后&#xff0c;再打开天猫&#xff0c;系统便自动帮…

从“Hello,World”谈起(C++入门)

前言 c的发展史及c能干什么不能干什么不是我们今天的重点&#xff0c;不在这里展开&#xff0c;有兴趣的朋友可以自行查阅相关资料。今天我们主要是围绕c的入门程序&#xff0c;写一个“hello&#xff0c;world”&#xff0c;并且围绕这个入门程序简单介绍一下c和c的一些语法&…

【fastadmin 开发实战】select 级联选择

先看实现的效果 1、表单页面实现级联选择 2、级联选项后台可以编辑添加 前端代码&#xff08;编辑窗口&#xff09;&#xff1a; <div class"form-group"><label class"control-label col-xs-12 col-sm-2">{:__(渠道归属)}:</label><…

STM32HAL库+ESP8266+cJSON+微信小程序_连接华为云物联网平台

STM32HAL库ESP8266cJSON微信小程序_连接华为云物联网平台 实验使用资源&#xff1a;正点原子F407 USART1&#xff1a;PA9P、A10&#xff08;串口打印调试&#xff09; USART3&#xff1a;PB10、PB11&#xff08;WiFi模块&#xff09; DHT11&#xff1a;PG9&#xff08;采集数据…

推荐3款良心效率软件,妥妥的神器,绝对不可错过

Wise JetSearch Wise JetSearch 是一款免费且功能强大的文件搜索工具&#xff0c;支持在本地硬盘和可移动磁盘上快速查找文件和文件夹。该软件特别适用于FAT32、NTFS以及exFAT格式的硬盘。 Wise JetSearch 使用索引技术&#xff0c;可以在极短的时间内完成大规模文件的搜索任务…

Hadoop3:HDFS-通过配置黑白名单对集群进行扩缩容,并实现数据均衡(实用)

一、集群情况介绍 我的本地虚拟机&#xff0c;一共有三个节点&#xff0c;hadoop102、hadoop103、hadoop104 二、白名单 创建白名单文件whitelist&#xff0c;通过白名单的配置&#xff0c;只允许集群包含102和103两台机器可以存储数据&#xff0c;104无法存储数据。 需求 …