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.pswp.cn/web/43684.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/43684.shtml
英文地址,請注明出處:http://en.pswp.cn/web/43684.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

小白攻克歌曲“無名的人”,逐句精研的歌唱訣竅

《無名的人》 作詞&#xff1a;唐恬 作曲&#xff1a;錢雷 演唱&#xff1a;毛不易 今天不講解練習技巧&#xff0c;有需要的可以查看往期文章&#xff0c;我給大家帶一下無名的人&#xff0c;練習一下情感融入。 對于眾多唱歌小白而言&#xff0c;學習歌曲《無名的人》是一…

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…

Apache Web安全分析與增強

Apache HTTP Server 概述 Apache HTTP Server(通常簡稱為Apache)是一個開源的Web服務器軟件,由Apache軟件基金會開發和維護。它是全球使用最廣泛的Web服務器之一,支持多種操作系統,包括Unix、Linux、Windows和Mac OS X。以下是Apache Web服務器的詳細概述,包括其功能特點…

數字高壓表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;因為它直接影響到芯片的焊接質量和長期…

江蘇云服務器適用于哪些場景?

云服務器主要是指一中基于云計算技術的虛擬化服務器&#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;為了提高高…

vue3 兩個組件之間傳值

Props 父組件可以通過 props 將數據傳遞給子組件。這是最常見的組件間通信方式 <!-- 父組件 --><template><ChildComponent :message"parentMessage" /></template><script>import ChildComponent from ./ChildComponent.vue;export…

Linux-shell編程入門基礎

文章目錄 前言Shell編程bash特性shell作用域變量環境變量$特殊變量$特殊狀態變量 $特殊符號(很重要)其他內置shell命令shell語法的子串截取統計 指令執行時間練習shell特殊擴展變量父子shell的理解內置和外置命令區別 數值計算雙括號(())運算letexprexpr模式匹配 bcawk中括號 s…

MySQL InnoDB事務隔離的幾種級別

MySQL InnoDB是一種支持事務的存儲引擎&#xff0c;提供了多種事務隔離級別&#xff0c;分別是&#xff1a;讀未提交&#xff08;READ UNCOMMITTED&#xff09;&#xff0c;讀已提交&#xff08;READ COMMITTED&#xff09;&#xff0c;可重復讀&#xff08;REPEATABLE READ&am…

數據結構(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 是一種非常實…