當(dāng)前位置：首頁 > 科技 > 軟件

CSS 實現(xiàn)弧形卡片的三種方式

來源：責(zé)編：時間：2023-12-04 17:26:56 308觀看

導(dǎo)讀在平時開發(fā)中，有時候會碰到下面這種“弧形”樣式，主要分為“內(nèi)凹”和“外凸”兩種類型，如下圖片該如何實現(xiàn)呢？或者想一下，有哪些 CSS 屬性和“弧形”有關(guān)？下面介紹 3 種方式，一起看看吧一、border-radius通常情況下，我們用bor

在平時開發(fā)中，有時候會碰到下面這種“弧形”樣式，主要分為“內(nèi)凹”和“外凸”兩種類型，如下

圖片

該如何實現(xiàn)呢？或者想一下，有哪些 CSS 屬性和“弧形”有關(guān)？下面介紹 3 種方式，一起看看吧

一、border-radius

通常情況下，我們用border-radius都是這樣

div{  border-radius: 20px;}

這樣表示 4 個角都是圓角，并且是標(biāo)準(zhǔn)的正圓

圖片

其實，border-radius還支持斜杠的寫法，比如

div{  border-radius: 20px / 10px;}

這表示，圓角是一個x半徑為20px，y半徑為10px的橢圓，如下

圖片

放大來看，其實是這樣的

圖片

進一步，我們將x半徑設(shè)置成50%，這樣就能得到一個完整的弧形了

div{  border-radius: 50% / 20px;}

效果如下

圖片

這樣就得到了“外凸”的弧形了，是不是很容易？

至于“內(nèi)凹”弧形，單純的border-radius表示無能為力，可以看接下來的方式

二、偽元素+border-radius

這個其實大多數(shù)同學(xué)都能想到的方式，一個矩形和一個橢圓組合起來，不就是一個弧形卡片了嗎？原理非常簡單

圖片

用代碼實現(xiàn)就是

div{  position: relative;}div::after{  content: '';  position: absolute;  width: 100%;  height: 20px;  border-radius: 100%;  background: inherit; /* 繼承父級背景 */  bottom: 0;  left: 50%;  transform: translate(-50%,50%);}

效果如下（虛線表示偽元素的邊緣）

圖片

用偽元素的好處是，可以隨意控制弧度的「大小」和「位置」，這個是border-radius所不能比的

通過overflow:hidden裁剪多余部分，可以得到一個邊緣比較“鋒利”的弧形，如下所示

圖片

另外，用偽元素還能實現(xiàn)“內(nèi)凹”的效果，不過這需要反過來思考，什么意思呢？之前是給偽元素加的背景，現(xiàn)在需要加在偽元素的外圍，這里用box-shadow實現(xiàn)，原理如下

圖片

用代碼實現(xiàn)就是

div{  background: none;  overflow: hidden;}div::after{  content: '';  background: none;  box-shadow: 0 0 0 9999vh #FFE8A3; /*足夠大的陰影*/  z-index: -1;}

效果如下（虛線表示偽元素的邊緣）

圖片

三、徑向漸變

提到圓弧，還可以想到徑向漸變，沒錯，這里通過徑向漸變也能輕易實現(xiàn)弧形卡片效果。

先來看“外凸”的，其實思路和偽元素一樣，先拆分，一個橢圓和一個矩形，對應(yīng)的就是徑向漸變（radial-gradient）和線性漸變(linear-gradient)，如下

圖片

用代碼實現(xiàn)就是

div{  background:     radial-gradient(closest-side, #9747FF 100%,transparent 0) center bottom/100% 20px no-repeat,    linear-gradient(#FFE8A3, #FFE8A3) 0 0/100% calc(100% - 10px) no-repeat;}

效果如下（紫色部分是徑向漸變）

圖片

再來看“內(nèi)凹”的弧形，其實也和偽元素思路類似，只不過這里需要繪制一個足夠大的漸變，從透明到純色的徑向漸變，示意如下

圖片

調(diào)整好漸變中心點，用代碼實現(xiàn)就是

div{  background: radial-gradient(50% 10px at center bottom, transparent 100%,#FFE8A3 0) center bottom;}

效果如下（全部都是徑向漸變繪制）

圖片

當(dāng)然你也可以隨意改變徑向的弧度和大小，來實現(xiàn)各種不同的效果。

以上所有demo都可以查看以下在線鏈接

CSS radius layout (juejin.cn)[1]
CSS radius layout (codepen.io)[2]

四、優(yōu)缺點總結(jié)

以上就是本文的全部內(nèi)容了，共介紹了 3 種不同的方式，下面總結(jié)一下各自優(yōu)缺點

border-radius 支持斜杠語法，可以單獨控制圓弧的x、y半徑，實現(xiàn)“外凸”圓弧最簡單，缺點是圓弧不能自定義弧度，也不能實現(xiàn)“內(nèi)凹”效果
偽元素最符合常規(guī)思維，可以解決以上問題，缺點是需要占用偽元素，略微麻煩
漸變實現(xiàn)和偽元素拼接思路類似，缺點是語法復(fù)雜，需要熟練掌握漸變語法

[1]CSS radius layout (juejin.cn)： https://code.juejin.cn/pen/7307633420241534985

[2]CSS radius layout (codepen.io)： https://codepen.io/xboxyan/pen/RwveByx

本文鏈接：http://www.tebozhan.com/showinfo-26-37684-0.htmlCSS 實現(xiàn)弧形卡片的三種方式

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Python 數(shù)據(jù)庫操作模塊大揭秘：帶你輕松掌握這六種常見模塊！

下一篇： 2023軟件架構(gòu)和設(shè)計的趨勢

標(biāo)簽：

熱門焦點

K60 Pro官方停產(chǎn) 第三方瞬間漲價

雖然沒有官方宣布，但Redmi的一些高管也已經(jīng)透露了，Redmi K60 Pro已經(jīng)停產(chǎn)且不會補貨，這一切都是為了即將到來的K60 Ultra鋪路，屬于廠家的正常操作。但有意思的是該機在停產(chǎn)之后
一文看懂為蘋果Vision Pro開發(fā)應(yīng)用程序

譯者 | 布加迪審校 | 重樓蘋果的Vision Pro是一款混合現(xiàn)實（MR）頭戴設(shè)備。Vision Pro結(jié)合了虛擬現(xiàn)實（VR）和增強現(xiàn)實（AR）的沉浸感。其高分辨率顯示屏、先進的傳感器和強大的處理能力
Golang 中的 io 包詳解：組合接口

io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是對Reader和Writer接口的組合，
十個簡單但很有用的Python裝飾器

裝飾器（Decorators）是Python中一種強大而靈活的功能，用于修改或增強函數(shù)或類的行為。裝飾器本質(zhì)上是一個函數(shù)，它接受另一個函數(shù)或類作為參數(shù)，并返回一個新的函數(shù)或類。它們通常用
拼多多APP上線本地生活入口，群雄逐鹿萬億市場

Tech星球（微信ID：tech618）文 | 陳橋輝 Tech星球獨家獲悉，拼多多在其APP內(nèi)上線了“本地生活”入口，位置較深，位于首頁的“充值中心”內(nèi)，目前主要售賣美食相關(guān)的
當(dāng)家的盒馬，加速謀生

來源 | 價值星球Planet作者 | 歸去來自己“當(dāng)家”的盒馬，開始加速謀生了。據(jù)盒馬官微消息，盒馬計劃今年開放生鮮供應(yīng)鏈，將其生鮮商品送往食堂。目前，盒馬在上海已經(jīng)與
阿里瓴羊One推出背后，零售企業(yè)迎數(shù)字化新解

作者:劉曠近年來隨著數(shù)字經(jīng)濟的高速發(fā)展，各式各樣的SaaS應(yīng)用服務(wù)更是層出不窮，但本質(zhì)上SaaS大多局限于單一業(yè)務(wù)流層面，對用戶核心關(guān)切的增長問題等則沒有提供更好的解法。在Saa
華為將推出盤古數(shù)字人大模型可幫助用戶12小時完成數(shù)字人生成

在今日舉行的2023年華為云數(shù)字文娛AI創(chuàng)新峰會上，華為云全球Marketing與銷售服務(wù)總裁石冀琳表示，華為云將在后續(xù)推出盤古數(shù)字人大模型，可幫助用戶12小
AI藝術(shù)欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

光影交錯的鏡像世界，虛實幻化的視覺奇觀，虛擬偶像與真人共同主持，這些場景都出現(xiàn)在2019世界人工智能大會的舞臺上。8月29日至31日，“AI藝術(shù)欣賞體驗會”在上海

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

CSS 實現(xiàn)弧形卡片的三種方式

一、border-radius

二、偽元素+border-radius

三、徑向漸變

四、優(yōu)缺點總結(jié)

K60 Pro官方停產(chǎn) 第三方瞬間漲價

一文看懂為蘋果Vision Pro開發(fā)應(yīng)用程序

Golang 中的 io 包詳解：組合接口

十個簡單但很有用的Python裝飾器

拼多多APP上線本地生活入口，群雄逐鹿萬億市場

當(dāng)家的盒馬，加速謀生

阿里瓴羊One推出背后，零售企業(yè)迎數(shù)字化新解

華為將推出盤古數(shù)字人大模型可幫助用戶12小時完成數(shù)字人生成

AI藝術(shù)欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊