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

CSS實現(xiàn)弧形卡片的3種方式：打造優(yōu)雅的現(xiàn)代網(wǎng)頁設(shè)計

**導(dǎo)語：** 在網(wǎng)頁設(shè)計中，弧形元素以其柔和而富有動態(tài)感的設(shè)計深受青睞，尤其在卡片設(shè)計上，弧形邊緣能賦予其獨特的視覺效果。本文將詳細介紹利用CSS創(chuàng)建弧形卡片的3種不同方法，包括但不限于CSS border-radius、clip-path及mask屬性，讓您的網(wǎng)頁更具吸引力。下面我們將通過實戰(zhàn)代碼演示每種方法的具體應(yīng)用。

---

### **一、基礎(chǔ)方法：border-radius 弧度控制**

**簡介：**

`border-radius` 是最常見且兼容性最好的創(chuàng)建圓角或弧形卡片的方式，適用于創(chuàng)建簡單弧形邊角的卡片設(shè)計。

```html

</div>

```

```css

.card-rounded {

background-color: #f5f5f5;

width: 200px;

height: 100px;

border-radius: 20px; /* 可根據(jù)需要調(diào)整數(shù)值 */

overflow: hidden;

}

```

上述代碼將創(chuàng)建一個具有弧形邊角的卡片。通過調(diào)整 `border-radius` 的值，您可以創(chuàng)建出不同程度的弧形效果，但請注意，這種方法無法創(chuàng)建非對稱或復(fù)雜弧形。

---

### **二、進階技巧：clip-path 實現(xiàn)自由形狀**

**介紹：**

`clip-path` 屬性允許我們創(chuàng)建任意形狀的裁剪區(qū)域，從而實現(xiàn)更為復(fù)雜和定制化的弧形卡片設(shè)計。

```html

</div>

```

```css

.card-clip-path {

background-color: #f5f5f5;

width: 200px;

height: 100px;

-webkit-clip-path: circle(50% at right 50%);

clip-path: circle(50% at right 50%);

}

```

上述代碼創(chuàng)建了一個右半部分呈弧形的卡片。`clip-path` 提供了更多創(chuàng)造性可能，可以創(chuàng)建橢圓、多邊形甚至路徑裁剪等多種弧形效果。然而需要注意的是，`clip-path` 的瀏覽器兼容性不如 `border-radius` 理想。

---

### **三、創(chuàng)新方案：CSS Masks 打造靈活曲線**

**原理：**

CSS Masks 可以通過 `mask-image` 或 `mask-shape` 屬性為元素添加遮罩，同樣可以用來創(chuàng)建弧形卡片效果。

```html

</div>

```

```css

.card-mask {

background-color: #f5f5f5;

width: 200px;

height: 100px;

-webkit-mask-image: radial-gradient(circle, transparent 50%, white 51%);

mask-image: radial-gradient(circle, transparent 50%, white 51%);

}

```

以上代碼利用徑向漸變作為遮罩，實現(xiàn)了卡片頂部弧形邊緣的效果。CSS Masks 具有高度靈活性，可以用于創(chuàng)建更復(fù)雜的形狀，但它的瀏覽器兼容性也相對有限。

---

### **結(jié)論與比較**

- **border-radius** 方法最為簡單易用且兼容性最好，適合日常項目和快速原型設(shè)計；

- **clip-path** 提供了更豐富的形狀裁剪能力，適合需要突破常規(guī)、追求獨特視覺效果的場景；

- **CSS Masks** 能夠創(chuàng)建基于圖像或者漸變的復(fù)雜蒙版效果，適用范圍較廣，但需要注意舊版本瀏覽器的支持情況。

選擇何種方式實現(xiàn)弧形卡片取決于項目的實際需求和兼容性要求。通過巧妙運用這些CSS特性，您可以輕松打造出別具一格的弧形卡片設(shè)計，增添網(wǎng)站的視覺吸引力。

---

**補充實踐案例：**

對于一些高級應(yīng)用場景，您還可以結(jié)合以上技術(shù)，比如使用CSS Grid布局和Flexbox進行容器布局，同時利用CSS變量和媒體查詢適應(yīng)不同屏幕尺寸，讓弧形卡片設(shè)計更加靈活和響應(yīng)式。

切記，在實際開發(fā)過程中，務(wù)必關(guān)注瀏覽器兼容性問題，必要時借助PostCSS、Autoprefixer等工具增強跨瀏覽器兼容性。同時，保持對新興CSS特性的關(guān)注，與時俱進地更新您的設(shè)計與開發(fā)技術(shù)棧。

css3之前，并沒有直接的設(shè)置元素圓角的屬性，那如何實現(xiàn)設(shè)計圖中的圓角設(shè)定呢？

如：表單demo中的文本框圓角。

一般通過在PS 軟件中截取上左、上右、下左、下右四個邊角的圓角圖片，通過background-position背景圖屬性設(shè)定位置，從而實現(xiàn)圓角的設(shè)定。

或是將四個圓角圖片當做四個img標簽，通過position定位屬性找尋設(shè)定的位置，如：

通過圖片設(shè)定圓角

在IE6、7、8還比較盛行的時候，如果要兼容到IE瀏覽器，需要使用CSS hack兼容IE瀏覽器版本，高級瀏覽器可以直接使用border-radius屬性設(shè)定圓角，對低版本瀏覽器使用圖片定位的方式實現(xiàn)設(shè)計圖呈現(xiàn)。但隨著近幾年瀏覽器版本的不斷更新迭代，我們需要做的就是，如果需要兼容低版本瀏覽器，只需保證呈現(xiàn)正常即可，無需過分的追求展示效果與設(shè)計圖的還原度。但實現(xiàn)的思想在web布局中是很重要的。

不久看到這樣一個很有趣的效果，它的滾動條是沿著圓角邊緣滾動的，效果如下

你可以查看原鏈接來體驗一下

https://codepen.io/jh3y/pen/gOEgxbd

這是如何實現(xiàn)的呢？

原效果中由于為了兼容不支持CSS滾動驅(qū)動的瀏覽器，特意用 JS做了兼容，所以看著比較復(fù)雜，其實核心非常簡單，下面我將用最簡短的 CSS 來復(fù)刻這一效果，一起看看吧

一、SVG 路徑動畫

從本質(zhì)上來講，其實是一個 SVG 路徑動畫。

具體如何實現(xiàn)呢？

首先，我們通過設(shè)計軟件繪制一個這樣的路徑

注意設(shè)置描邊的大小還有端點的類型，比如下面是round效果

然后導(dǎo)出SVG，可以得到這樣一段代碼

<svg viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

然后，如何讓這段SVG動起來呢？

很簡單，現(xiàn)在SVG是一段實線，我們可以通過stroke-dasharray設(shè)置成虛線，比如

path{
  stroke-dasharray: 80
}

這樣會得到一個實線和虛線間隔都是80的虛線

如果希望虛線空白的地方更大一點，該怎么設(shè)置呢?很簡單，繼續(xù)往后加

path{
  stroke-dasharray: 80 120
}

效果如下

所以，這種寫法其實相當于把當前的值無限重復(fù)，示意如下

當然，我們這里不需要設(shè)置的這么復(fù)雜，只需要一小段實線就夠了，所以是實現(xiàn)加上一段足夠長的虛線（超過路徑本身就行），實現(xiàn)如下

path{
  stroke-dasharray: 80 1000
}

這樣就得到了一小段實線

那么，如何讓他動起來呢？很簡單，改變一下偏移就可以，這個可以用stroke-dashoffset來實現(xiàn)

比如，我們

@keyframes scroll {
  to {
    stroke-dashoffset: -370
	}
}
path{
  stroke-dasharray: 80 1000;
  animation: scroll 3s alternate-reverse infinite;
}

效果如下

是不是有點像呢？

我們再調(diào)整一下起始偏移量，讓它出去一點

@keyframes scroll {
  0% { stroke-dashoffset: 75; }
  100% { stroke-dashoffset: -445; }
}

這樣就更接近我們想要的效果了

整個運動原理就是這樣了，接著往下看

二、CSS 滾動驅(qū)動動畫

接下來需要通過滾動驅(qū)動動畫將容器滾動與CSS動畫「聯(lián)動」起來。

關(guān)于CSS 滾動驅(qū)動可以參考我之前寫的這篇文章：CSS 滾動驅(qū)動動畫終于正式支持了~

簡單來講，「CSS 滾動驅(qū)動動畫」指的是將「動畫的執(zhí)行過程由頁面滾動」進行接管，也就是這種情況下，「動畫只會跟隨頁面滾動的變化而變化」，也就是滾動多少，動畫就執(zhí)行多少，「時間不再起作用」。

先簡單布局一下

<div class="list">
  <div class="item" id="item_1">1</div>
  <div class="item" id="item_2">2</div>
  <div class="item" id="item_3">3</div>
  <div class="item" id="item_4">4</div>
  <div class="item" id="item_5">5</div>
  <div class="item" id="item_6">6</div>
  <div class="item" id="item_7">7</div>
</div>

美化一下

然后，我們將默認的滾動條隱藏，用我們這個 SVG路徑來代替，由于需要絕對定位，我們再套一層父級

<div class="wrap">
  <div class="list">
    <div class="item" id="item_1">1</div>
    <div class="item" id="item_2">2</div>
    <div class="item" id="item_3">3</div>
    <div class="item" id="item_4">4</div>
    <div class="item" id="item_5">5</div>
    <div class="item" id="item_6">6</div>
    <div class="item" id="item_7">7</div>
    <!--滾動條-->
    <svg class="scroller" viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path class="scroller_thumb" d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>

相關(guān)CSS如下

.wrap{
  position: relative;
}
.scroller {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  height: -webkit-fill-available;
  margin: 5px;
}
.scroller_thumb{
  stroke: hsl(0 0% 100% / 0.5);
  stroke-dasharray: 80 450;
  stroke-width: 8px;
  animation: scroll both 5s linear;
}

這樣結(jié)構(gòu)就搭好了，只是滾動條會自動播放

接下來就是最關(guān)鍵的一步，加上滾動驅(qū)動動畫

.scroller_thumb{
  animation: scroll both 5s linear;
  animation-timeline: scroll();
}

但是這樣是不起作用的，直接使用scroll()會自動尋找它的相對父級，也就是.wrap，但實際滾動的其實是.list，所以這種情況下我們需要具名的滾動時間線，實現(xiàn)如下

.list{
  scroll-timeline: --scroller;
}
.scroller_thumb{
  animation: scroll both 5s linear;
  animation-timeline: --scroller;
}

這樣SVG路徑動畫就能跟隨容器滾動而運動了

三、CSS 滾動吸附

原效果中還有一個滾動回彈的效果，當滾動到容器邊緣時，會自動回彈到起始位置。

其實只需要用到 CSS scroll snap 就可以了

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type

實現(xiàn)很簡單，給滾動容器添加scroll-snap-type屬性，表示這是個允許滾動吸附的容器

.list{
  scroll-snap-type: y mandatory;
}

然后就指定需要吸附的點了，由于需要回彈的效果，所以滾動容器的首尾需要一個空白的容器，這里直接用兩個偽元素來生成

.list::before,
.list::after{
  content: '';
  height: 50px;
  flex-shrink: 0;
}

效果如下

然后我們設(shè)置滾動吸附點就行了，設(shè)置第一個元素頂部和最后一個元素底部，其他元素居中就行了

.item{
  scroll-snap-align: center;
}
.item:first-child{
  scroll-snap-align: start;
}
/*最后一個元素是 SVG，所以這里用倒數(shù)第二個元素*/
.item:nth-last-child(2){
  scroll-snap-align: end;
}

這樣就實現(xiàn)了文章開頭的效果了

完整代碼可以查看以下鏈接（無任何 JS）

CSS round scroll (juejin.cn)[1]
CSS round scroll (codepen.io)[2]

四、總結(jié)一下

總的來說，CSS滾動驅(qū)動在滾動交互上帶來了無限可能，很多以前必須借助 JS來實現(xiàn)的都可以輕易實現(xiàn)，下面總結(jié)一下

從本質(zhì)上來講，右側(cè)的滾動條其實是一個 SVG 路徑動畫
SVG路徑可以通過stroke-dasharray設(shè)置虛實間隔
當虛線間隔足夠長時，超過路徑本身，就能得到一小塊實線
通過改變stroke-dashoffset偏移能夠?qū)崿F(xiàn)路徑描邊動畫
借助 CSS滾動驅(qū)動動畫可以將SVG路徑動畫跟隨容器滾動而運動
滾動回彈效果其實就是CSS scroll snap實現(xiàn)的

作者:XboxYan

來源:微信公眾號:前端偵探

出處:https://mp.weixin.qq.com/s/GaakgWhXm6jpY4PfISNHZQ

在線咨詢

上一篇：將JavaScript代碼轉(zhuǎn)換為漂亮的SVG流程圖-js2flowchart
下一篇：學(xué)習(xí)HTML5的五個原因

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

一、SVG 路徑動畫

二、CSS 滾動驅(qū)動動畫

三、CSS 滾動吸附

四、總結(jié)一下

您的項目需求

一、SVG 路徑動畫

三、CSS 滾動吸附

四、總結(jié)一下