CSS3實現同心圓效果

效果圖:

文本左側顯示一個?外圓(30px,半透明)?和?內圓(12px,實色)?的同心圓:?

<!DOCTYPE html>
<html>
<head><style>.text-with-circles {position: relative;padding-left: 40px; /* 讓文本不緊貼圓圈 */}.text-with-circles::before {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);/* 內圓樣式 */width: 12px;height: 12px;background: #48E9FF;border-radius: 50%;/* 用 box-shadow 模擬外圓 */box-shadow: 0 0 0 9px rgba(72, 233, 255, 0.20);/* 9px = (30px - 12px)/2 */}</style>
</head>
<body><p class="text-with-circles">這里是帶有同心圓的文本</p>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/912099.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/912099.shtml
英文地址,請注明出處:http://en.pswp.cn/news/912099.shtml

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

相關文章

Spring Boot項目開發實戰銷售管理系統——系統設計!

Spring Boot項目開發實戰——銷售管理系統 在前面的章節中我們詳細介紹了Spring Boot各個功能的使用&#xff0c;本章將新建一個銷售管理系統項目&#xff0c;演示項目從需求分析到功能分解&#xff0c;再到各個功能的實現過程&#xff0c;最后再使用Docker部署上線的完整過程…

RK3588開發筆記-Hailo AI模塊調試

目錄 前言 一、RK3588 與 Hailo AI 模塊簡介 RK3588 Hailo AI 模塊 二、原理圖連接 三、內核配置 四、Hailo驅動編譯 五、Hailo模塊驗證 總結 前言 在邊緣計算和人工智能應用不斷發展的今天,將高性能的 AI 模塊與功能強大的開發板相結合,能為各種創新應用提供堅實的基…

【Pytorch】語言模型上的動態量化

目錄 ■導言 ①定義模型 ②加載文本數據 ③加載預訓練模型 ④測試動態量化 ■結論 ■導言 量化涉及將模型的權重和激活從float轉換為int&#xff0c;這可以導致更小的模型大小和更快的推理&#xff0c;并且只對準確性造成很小的影響。 本文將把最簡單的量化形式-動態量…

【有啥問啥】大模型效率部署之Prefill-Decode分離

大模型效率部署之Prefill-Decode分離 Prefill 與 Decode 階段定義與流程 LLM 推理分為兩個階段&#xff1a;預填充&#xff08;Prefill&#xff09;和解碼&#xff08;Decode&#xff09;。在 Prefill 階段&#xff0c;模型將完整地處理用戶輸入的所有提示詞&#xff08;prom…

QT Creator構建失敗:-1: error: Unknown module(s) in QT: serialport

Qt Creator和Qt SDK版本&#xff1a; Product: Qt Creator 17.0.0 Based on: Qt 6.9.1 (MSVC 2022, x86_64) Built on: Jun 17 2025 16:32:24 From revision: 4983f08c47 問題&#xff1a; 在使用串口的時候&#xff0c;在pro 文件中添加了 QT serialport&#xff…

基于PostgreSQL的百度或高德等POI多層級分類的數據庫設計

目錄 前言 一、百度 VS 高德 POI分類 1、高德POI分類 2、百度POI分類 3、分類對比與區別 二、POI分類表設計 1、物理表結構 2、數據存儲 3、數據查詢 三、總結 前言 在當今數字化快速發展的時代&#xff0c;地理信息數據的重要性日益凸顯&#xff0c;而POI&#xff08…

AutoVLA:端到端自動駕駛中具有自適應推理和強化微調功能的視覺-語言-動作模型

26年6月來自UCLA的論文“AutoVLA: A Vision-Language-Action Model for End-to-End Autonomous Driving with Adaptive Reasoning and Reinforcement Fine-Tuning”。 視覺-語言-動作 (VLA) 模型的最新進展通過利用世界知識和推理能力為端到端自動駕駛帶來了希望。然而&#x…

知攻善防靶機 Windows 近源OS

知攻善防靶機 [hvv訓練]應急響應靶機訓練-近源滲透OS-1 前景需要&#xff1a;小王從某安全大廠被優化掉后&#xff0c;來到了某私立小學當起了計算機老師。某一天上課的時候&#xff0c;發現鼠標在自己動彈&#xff0c;又發現除了某臺電腦&#xff0c;其他電腦連不上網絡。感覺…

「Java基本語法」求三位整數的各位數字之和

引言 現在來玩一個數字拆解游戲。想象一下手里拿著一個三位數的積木,現在需要把它拆成個位、十位和百位三塊,然后把它們加起來。這個操作在實際編程中很常見,例如做密碼校驗、游戲分數計算等都可能會用到。 案例:求三位數各位之和 編寫程序,從鍵盤輸入一個三位的正整數…

SciChart 助力蛋白質結構研究:實時可視化推動生物科學新突破

SciChart是高性能數據可視化領域的優秀圖表產品&#xff0c;深受數據密度和精度至關重要行業的信賴&#xff0c;包括航空航天、石油和天然氣、科學研究和賽車運動等。作為F1中使用的解決方案&#xff0c;SciChart被NASA所依賴&#xff0c;并受到90%的頂級醫療技術公司青睞&…

基于Docker與cpolar的Leantime部署方案實現低成本跨地域團隊協作

文章目錄 前言1.關于Leantime2.本地部署Leantime3.Leantime簡單實用4.安裝內網穿透5.配置Leantime公網地址6. 配置固定公網地址 前言 各位小伙伴們&#xff0c;讓我們暫時把目光從云端的分布式系統轉向本地環境。在您的Linux主機上&#xff0c;我們將搭建一個高性價比的協作平…

阿里云Redhat系Linux修改ssh默認端口

阿里云Redhat系Linux修改ssh默認端口 在阿里云買了個服務器&#xff0c;想著ssh的默認端口是22&#xff0c;這不安全。 我就將修改ssh默認端口的過程記錄下來了&#xff0c;方便日后回看。 本命令適用于 Redhat系Linux&#xff0c;例如 Redhat、Centos、Alibaba Cloud Linux、…

lib61850 代碼結構與系統架構深度分析

一、整體代碼結構概述 lib61850 采用模塊化設計&#xff0c;核心代碼位于src目錄下&#xff0c;主要包含以下子目錄&#xff1a; src/ ├── hal/ # 硬件抽象層 ├── mms/ # MMS協議實現 ├── goose/ # GOOSE協議實現 ├──…

linux程序保活

需要解決的一個情況&#xff0c;在一些比較老的linux系統里&#xff0c;沒有systemctl來進行程序的啟動和重啟。現在需要設計一個讓程序高可用的方案。盡量提高程序可用性。 方案分成幾步&#xff0c;屬于補充和遞進的關系。最簡單的是用systemctl 托管&#xff0c;或者service…

文件加密、隱藏軟件 GiliSoft File Lock Pro v15.0 打造自己的私密空間

“在這個連聊天記錄都可能被截圖的時代&#xff0c;你的電腦硬盤里藏著多少不敢示人的秘密&#xff1f;”上周同事借我電腦改PPT時&#xff0c;我突然想起D盤里存著的年度述職報告草稿——那里面密密麻麻標注著部門每個人的績效短板&#xff0c;要是被誤看到簡直社死現場。好在…

深入淺出Java NIO:原理、實戰與性能優化

深入淺出Java NIO&#xff1a;原理、實戰與性能優化 一、技術背景與應用場景 隨著高并發、低延遲場景愈發常見&#xff0c;傳統的基于阻塞 I/O&#xff08;BIO&#xff09;模型難以滿足海量連接的需求。Java NIO&#xff08;Non-blocking I/O&#xff09;通過 Selector、Chan…

道可云人工智能每日資訊|中國航空工業集團召開人工智能大會

道可云人工智能&元宇宙每日簡報&#xff08;2025年6月25日&#xff09;訊&#xff0c;今日人工智能&元宇宙新鮮事有&#xff1a; 第22屆中國—東盟商務與投資峰會聚焦人工智能熱點 第22屆中國—東盟商務與投資峰會(以下簡稱峰會)聯絡官會議24日在廣西南寧召開。中國貿…

Python實例題:文件內容搜索工具

目錄 Python實例題 題目 要求&#xff1a; 解題思路&#xff1a; 代碼實現&#xff1a; Python實例題 題目 文件內容搜索工具 要求&#xff1a; 實現一個命令行工具&#xff0c;用于在指定目錄下搜索包含特定文本的文件。支持以下功能&#xff1a; 遞歸搜索子目錄區分…

【Pandas】pandas DataFrame resample

Pandas2.2 DataFrame Time Series-related 方法描述DataFrame.asfreq(freq[, method, how, …])用于**將時間序列數據轉換為指定頻率&#xff08;resample to frequency&#xff09;**的方法DataFrame.asof(where[, subset])用于查找時間序列中最接近指定時間點的非 NaN 值的…

自動駕駛nuPlan數據集-入門使用和可視化操作

文章目錄 前言一、nuPlan 數據集下載及環境安裝根據個人安裝的路徑將以下內容寫入./bashrc 中二、跑通場景可視化總結 前言 自動駕駛行業知識點太多&#xff0c;不進則退&#xff0c;上班就得學習&#xff0c;天上掉金磚砸我腳好了 參考文檔 參考&#xff11; 一、nuPlan 數據…