CSS揭秘:9.自適應的橢圓

前置知識:border-radius 用法

前言

本篇目標是實現一個橢圓,半橢圓,四分之一橢圓。

一、圓形和橢圓

當我們想實現一個圓形時,通常只要指定 border-radiuswidth/height一半就可以了。

當我們指定的border-radius的值超過了 width/height的一半時,我們仍發現可以實現一個圓形,這是因為:

“當任意兩個相鄰圓角的半徑之和超過 border box
的尺寸時,用戶代理必須按比例減小各個邊框半徑所使用的值,直到他們不會相互重疊為止。”

width: 200px;
height: 200px;
border-radius: 100px;

當然,在我們不確定寬高的情況下,我們也可以用百分比來實現動態的圓形

border-radius: 50%;

所以,使用百分比可以實現當寬高一致時,是個圓,不一致時是個橢圓。

二、半橢圓

如何實現一個半橢圓,那么首先我們就要了解 border-radius 的全部用法。

該屬性是一個 簡寫屬性,代表了以下四個屬性

  1. border-top-left-radius
  2. border-top-right-radius
  3. border-bottom-right-radius
  4. border-bottom-left-radius

分別代表從左上角 開始 順時針順序

當然更方便的還是使用 border-radius 這個簡寫,當指定不同個數的值時,會有不同的效果

  1. 當有4個值時,每個值分別對應左上角,右上角,右下角,左下角 的半徑。
  2. 當有3個值時,第二個值代表右上角和左下角的值。
  3. 當有2個值時,第一個值代表左上角和右下角,第二個值代表右上角和左下角。
  4. 當有1個值時,代表所以的角半徑。
    在這里插入圖片描述

我們也可以為每個角提供不同的水平和垂直半徑。

先介紹下單獨一個屬性 border-top-left-radius ,它有兩個參數, 分別是水平半徑和垂直半徑。

當水平半徑和垂直半徑相同時,它的弧度就是圓形的一部分。如果不一樣則是橢圓的一部分。

border-top-left-radius: 1em 5em;

在這里插入圖片描述

那么四個角,使用border-radius 的實現方式如下, 使用 / 來分隔 水平和垂直 半徑。 / 前后其他規則類似
border-radius: 1em/5em;

/* 等價于:*/border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

那么要實現一個半橢圓就可以分別設置水平半徑和垂直半徑即可。

  1. 設置左上角和右上角 的水平半徑為寬度的一半。
  2. 設置左上角和右上角 的垂直半徑為高度的全部。
width: 200px;
height: 200px;border-top-left-radius: 50% 100%;
border-top-right-radius:  50% 100%;
/* 等價于 */
border-radius: 50% 50% 0 0 / 100% 100% 0 0;

在這里插入圖片描述

那么實現一個四分之一橢圓,也是非常簡單的。
我們只需要設置左上角的水平和垂直半徑 占滿寬和高即可。


width: 200px;
height: 200px;border-top-left-radius: 100%;
/* 等價于 */
border-radius: 100%  0 0 0 / 100%  0 0 0;

在這里插入圖片描述

小結

該篇主要描述了如何實現了 橢圓,半橢圓,四分之一橢圓 的方法。
使用百分比實現自適應,設置橫縱半徑與邊同長實現橢圓。
實際上是對 border-radius 的使用方法的詳細講解,我們可以在了解之后實現其他的形狀!

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

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

相關文章

善用關系網絡:開源AI大模型、AI智能名片與S2B2C商城小程序賦能下的成功新路徑

摘要:本文聚焦于關系在個人成功中的關鍵作用,指出關系即財富,善用關系、拓展人脈是成功的重要途徑。在此基礎上,引入開源AI大模型、AI智能名片以及S2B2C商城小程序等新興技術工具,探討它們如何助力個體在復雜的關系網絡…

2025年滲透測試面試題總結-2025年HW(護網面試) 34(題目+回答)

安全領域各種資源,學習文檔,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各種好玩的項目及好用的工具,歡迎關注。 目錄 2025年HW(護網面試) 34 一、網站信息收集 核心步驟與工具 二、CDN繞過與真實IP獲取 6大實戰方法 三、常…

螢石全新上線企業AI對話智能體,開啟IoT人機交互新體驗

一、什么是螢石AI對話智能體?如何讓設備聽得到、聽得懂?這次螢石發布的AI對話Agent,讓設備能進行自然、流暢、真人感的AI對話智能體,幫助開發者打造符合業務場景的AI對話智能體能力,實現全雙工、實時打斷、可擴展、對話…

智紳科技:以科技為翼,構建養老安全守護網

隨著我國老齡化進程加速,2025年60歲以上人口突破3.2億,養老安全問題成為社會關注的焦點。智紳科技作為智慧養老領域的領軍企業,以“科技賦能健康,智慧守護晚年”為核心理念,通過人工智能、物聯網、大數據等技術融合&am…

矩陣系統源碼部署實操指南:搭建全解析,支持OEM

矩陣系統源碼部署指南矩陣系統是一種高效的數據處理框架,適用于大規模分布式計算。以下為詳細部署步驟,包含OEM支持方案。環境準備確保服務器滿足以下要求:操作系統:Linux(推薦Ubuntu 18.04/CentOS 7)硬件配…

基于python的個人財務記賬系統

博主介紹:java高級開發,從事互聯網行業多年,熟悉各種主流語言,精通java、python、php、爬蟲、web開發,已經做了多年的畢業設計程序開發,開發過上千套畢業設計程序,沒有什么華麗的語言&#xff0…

從 CODING 停服到極狐 GitLab “接棒”,軟件研發工具市場風云再起

CODING DevOps 產品即將停服的消息,如同一顆重磅炸彈,在軟件研發工具市場炸開了鍋。從今年 9 月開始,CODING 將陸續下線其 DevOps 產品,直至 2028 年 9 月 30 日完全停服。這一變動讓眾多依賴 CODING 平臺的企業和個人開發者陷入了…

#滲透測試#批量漏洞挖掘#HSC Mailinspector 任意文件讀取漏洞(CVE-2024-34470)

免責聲明 本教程僅為合法的教學目的而準備,嚴禁用于任何形式的違法犯罪活動及其他商業行為,在使用本教程前,您應確保該行為符合當地的法律法規,繼續閱讀即表示您需自行承擔所有操作的后果,如有異議,請立即停…

深入解析C++驅動開發實戰:優化高效穩定的驅動應用

深入解析C驅動開發實戰:優化高效穩定的驅動應用 在現代計算機系統中,驅動程序(Driver)扮演著至關重要的角色,作為操作系統與硬件設備之間的橋梁,驅動程序負責管理和控制硬件資源,確保系統的穩定…

SNIProxy 輕量級匿名CDN代理架構與實現

🌐 SNIProxy 輕量級匿名CDN代理架構與實現 🏗? 1. 整體架構設計 🔹 1.1 系統架構概覽 #mermaid-svg-S4n74I2nPLGityDB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-S4n74I2nP…

Qt的信號與槽(一)

Qt的信號與槽(一)1.信號和槽的基本認識2.connect3.關閉窗口的按鈕4.函數的根源5.形參和實參的類型🌟hello,各位讀者大大們你們好呀🌟🌟 🚀🚀系列專欄:【Qt的學習】 &…

springMVC02-視圖解析器、RESTful設計風格,靜態資源訪問配置

一、SpringMVC 的視圖在 SpringMVC 中,視圖的作用渲染數據,將模型 Model (將控制器(Controller))中的數據展示給用戶。在 Java 代碼中,視圖由接口 org.springframework.web.servlet.View 表示SpringMVC 視圖的種類很多…

Go中使用Google Authenticator

現在為了安全Google二次驗證使用越來越平凡了,所以我們自己做的一些產品中,也會用到Google Authenticator。 介紹 Google Authenticator采用的算法是TOTP(Time-Based One-Time Password基于時間的一次性密碼),其核心內…

ReactNative【實戰系列教程】我的小紅書 4 -- 首頁(含頂欄tab切換,橫向滾動頻道,頻道編輯彈窗,瀑布流布局列表等)

最終效果 頂欄 modules/index/components/topBar.tsx import icon_daily from "/assets/images/icon_daily.png"; import MaterialIcons from "expo/vector-icons/MaterialIcons"; import { useCallback, useState } from "react"; import { Im…

告別Root風險:四步構建安全高效的服務器管理體系

當整個開發團隊都使用root賬號操作服務器,且重要數據無備份時,系統如同行走在懸崖邊緣。本文將分享一套經過驗證的四步解決方案,幫助團隊快速提升主機安全性。 為什么必須告別Root賬號? 直接使用root賬號的風險: &am…

【IM項目筆記】1、WebSocket協議和服務端推送Web方案

這里寫自定義目錄標題 1、HTTP和WebSocket協議2、WebSocket3、Http VS WebSocket4、WebSocket - 建立連接5、服務端推送Web方案(1) 短輪詢(2) 長輪詢(3) WebSocket長連接1、HTTP和WebSocket協議 ?? HTTP請求的特點:通信只能由客戶端發起。所以,早期很多網站為了實現推送技…

【深度學習新浪潮】什么是上下文長度?

大型語言模型(LLM)的上下文長度是指模型在處理當前輸入時能夠有效利用的歷史文本長度,通常以token(如單詞、子詞或標點)為單位衡量。例如,GPT-4支持128K token的上下文,而Llama 4 Scout甚至達到了10M token的驚人規模。這一指標直接影響模型在長文檔理解、多輪對話等復雜…

Modbus TCP轉Profibus網關輕松讓流量計與DCS通訊

Modbus TCP轉Profibus網關輕松讓流量計與DCS通訊工業自動化系統中,協議差異常成為設備互聯的“語言障礙”。例如,當流量計采用Modbus TCP協議,而DCS系統僅支持Profibus DP時,如何實現無縫通信?本文將結合技術原理與真實…

云時代下的IT資產管理自動化實踐

前言伴隨著企業數字化轉型進程的加快,IT資產規模日益龐大且復雜。傳統的手工IT資產登記、跟蹤與管理方式,效率低下且容易出錯,已經無法滿足現代企業對于敏捷化、可視化和自動化運維的需求。云計算、容器化、微服務架構的普及又進一步加快了資…

Windows主機遠程桌面連接Ubuntu24.04主機

最近剛剛換了臺新電腦,想著空出老電腦直接裝一個Ubuntu系統給新電腦遠程連接過去進行開發,就可以完美避開雙系統老是要重啟切換的問題。仔細一查發現Ubuntu24.04自帶了RDP遠程工具,大喜!于是探究了一番。 本篇文章將介紹本人探究…