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

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

---

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

**簡介：**

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

```html

<div class="card-rounded">

<!-- 卡片內(nèi)容 -->

</div>

```

```css

.card-rounded {

background-color: #f5f5f5;

width: 200px;

height: 100px;

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

overflow: hidden;

}

```

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

---

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

**介紹：**

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

```html

<div class="card-clip-path">

<!-- 卡片內(nèi)容 -->

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

---

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

**原理：**

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

```html

<div class="card-mask">

<!-- 卡片內(nèi)容 -->

</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%);

}

```

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

---

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

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

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

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

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

---

**補(bǔ)充實(shí)踐案例：**

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

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

內(nèi)容首發(fā)于工粽號：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！

大家好，我是大澈！

本文約 1400+ 字，整篇閱讀約需 2 分鐘。

今天分享一段優(yōu)質(zhì) CSS 代碼片段，讓文本和背景色混合產(chǎn)生一種獨(dú)特的效果，就像下圖這種。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(qū)留下你的見解！

<div class="banner">
    <h1 class="title">每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注與投稿！</h1>
</div>

.banner {
    height: 230px;
    background-image: url(./img/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 230px;
    line-height: 230px;
    text-align: center;
}
.title {
    margin: 0;
    color: #fff;
    font-size: 50px;
    /* 關(guān)鍵點(diǎn) */
    mix-blend-mode: difference; 
}

分享原因

這段代碼展示了如何使用 CSS 和 HTML 創(chuàng)建一個(gè)帶有背景圖片和標(biāo)題文本的橫幅（banner），并且通過 mix-blend-mode: difference; 為標(biāo)題文本添加混合模式效果。

mix-blend-mode 屬性可以為元素設(shè)置混合模式，使其顏色與背景顏色混合，從而創(chuàng)建有趣的視覺效果。

這個(gè)效果在設(shè)計(jì)中很常見，能增加頁面的視覺吸引力，強(qiáng)調(diào)和突出文本內(nèi)容。

代碼解析

1. banner 類

設(shè)置背景元素基礎(chǔ)樣式。

定義背景圖片，以及讓文本垂直水平居中對齊。

2. mix-blend-mode: difference;

這是一個(gè)關(guān)鍵設(shè)置。

使用了 mix-blend-mode: difference; ，這意味著標(biāo)題文字的顏色將與其父元素（.banner）的背景顏色進(jìn)行差值計(jì)算，產(chǎn)生類似于反相的效果。

在這種情況下，由于父元素（.banner）的背景是白色，而文字原本的顏色是白色，通過差值計(jì)算后，文字顏色就變成了黑色，從而讓白色文字在白色背景上也能夠顯示。

3. mix-blend-mode 屬性詳解

mix-blend-mode CSS 屬性描述了元素的內(nèi)容應(yīng)該與其直系父元素的內(nèi)容和元素的背景如何混合。

它允許創(chuàng)建各種視覺效果，例如半透明效果、陰影、圖片蒙版等。

以下是兼容性：

以下是一些常見的屬性值：

normal：這是默認(rèn)值，使用正常的顏色混合模式，不產(chǎn)生特殊混合效果。

multiply：將兩個(gè)顏色的值相乘，會(huì)得到一個(gè)更暗的顏色，常用于創(chuàng)建陰影效果。

screen：將兩個(gè)顏色的值相加，然后減去相乘的值，會(huì)得到一個(gè)更亮的顏色，可用于創(chuàng)建高光效果。

overlay：根據(jù)背景顏色的亮度來選擇顏色混合模式。如果背景顏色較暗，則使用 multiply 模式；如果背景顏色較亮，則使用 screen 模式。

darken：將兩個(gè)顏色的值進(jìn)行比較，使用較暗的那個(gè)顏色。

lighten：與 darken 相反，使用較亮的那個(gè)顏色。

color-dodge：將前景色分解為 RGB 分量，并將每個(gè)分量分別除以（1 減去背景色的對應(yīng)分量），然后將每個(gè)分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。這種模式會(huì)使顏色變亮。

color-burn：將前景色分解為 RGB 分量，并將每個(gè)分量分別除以背景色的對應(yīng)分量，然后將每個(gè)分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。它會(huì)使顏色變暗。

difference：將前景色減去背景色的值，并取絕對值，會(huì)導(dǎo)致一種反相的效果。

exclusion：將前景色和背景色的值相加，然后減去相乘的值的兩倍，常用于創(chuàng)建反相效果，但其對比度比 difference 更低，顏色更柔和。

hue：將前景色的色相（hue）與背景色的飽和度（saturation）和亮度（lightness）混合，可在不改變亮度和飽和度的情況下改變顏色。

saturation：將前景色的飽和度與背景色的色相和亮度混合，用于在不改變顏色的情況下改變飽和度。

color：將前景色的色相、飽和度和亮度與背景色混合，會(huì)在改變所有顏色屬性的情況下改變前景色的顏色。

luminosity：將前景色的亮度與背景色的色相和飽和度混合，可在不改變顏色的情況下改變亮度。

言

通常，我們?yōu)閐iv盒子或者圖片設(shè)置陰影使用 box-shadow 屬性，代碼如下：

box-shadow: 10px 10px 10px gray;

問題拋出

使用 box-shadow 屬性 給div盒子設(shè)置陰影倒還好，如果用在透明的圖片上，陰影會(huì)變成方形的，讓其看起來像添加了一個(gè)邊框一樣。

解決方法

我們可以通過css的另一種參數(shù)，為透明png實(shí)現(xiàn)基于透明圖片的陰影效果，效果如下圖，左側(cè)是 box-shadow ，右側(cè) drop-shadow 。

drop-shadow()說明：

drop-shadow() 是CSS中用于為圖像或文本添加陰影效果的一個(gè)函數(shù)，?它屬于 filter 屬性的一部分。?這個(gè)函數(shù)允許你為元素創(chuàng)建陰影，?而不需要考慮元素的形狀或邊界框。?與 box-shadow 不同，?drop-shadow 可以應(yīng)用于非矩形形狀，?如透明的PNG或SVG圖像，?它使用元素的Alpha蒙版來決定陰影的形狀。?這意味著，?即使元素沒有背景，drop-shadow 也能為圖像的非透明部分創(chuàng)建陰影。?

drop-shadow()語法如下：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )

drop-shadow()參數(shù)說明如下：

• offset-x：該參數(shù)設(shè)置圖像的水平偏移量。正值創(chuàng)建右側(cè)偏移，負(fù)值創(chuàng)建左側(cè)偏移。
• offset-y：此參數(shù)設(shè)置圖像的垂直偏移量。正值創(chuàng)建到底部的偏移量，負(fù)值創(chuàng)建到頂部的偏移量。
• blur-radius：設(shè)置模糊半徑的值。它是一個(gè)可選參數(shù)。
• spread-radius：設(shè)置傳播半徑的值。它是一個(gè)可選參數(shù)。
• color：設(shè)置投影的顏色。它的可選參數(shù)。

演示代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img_box .left_img{
      box-shadow: 10px 10px 10px gray;
    }
    .img_box .right_img{
      filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
    }
  </style>
</head>
<body>

  <div class="img_box">
    <img class="left_img" src="./lihua.png" />
    <img class="right_img" src="./lihua.png" />
  </div>
  
</body>
</html>

總結(jié)

盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強(qiáng)調(diào)了一些使用 box-shadow的 情況，也許你可以在你的下一個(gè)項(xiàng)目中使用它！