CSS 实现弧形卡片的 3 种方式

CSS实现弧形卡片的3种方式：打造优雅的现代网页设计

**导语：** 在网页设计中，弧形元素以其柔和而富有动态感的设计深受青睐，尤其在卡片设计上，弧形边缘能赋予其独特的视觉效果。本文将详细介绍利用CSS创建弧形卡片的3种不同方法，包括但不限于CSS border-radius、clip-path及mask属性，让您的网页更具吸引力。下面我们将通过实战代码演示每种方法的具体应用。

---

### **一、基础方法：border-radius 弧度控制**

**简介：**

`border-radius` 是最常见且兼容性最好的创建圆角或弧形卡片的方式，适用于创建简单弧形边角的卡片设计。

```html

</div>

```

```css

.card-rounded {

background-color: #f5f5f5;

width: 200px;

height: 100px;

border-radius: 20px; /* 可根据需要调整数值 */

overflow: hidden;

}

```

上述代码将创建一个具有弧形边角的卡片。通过调整 `border-radius` 的值，您可以创建出不同程度的弧形效果，但请注意，这种方法无法创建非对称或复杂弧形。

---

### **二、进阶技巧：clip-path 实现自由形状**

**介绍：**

`clip-path` 属性允许我们创建任意形状的裁剪区域，从而实现更为复杂和定制化的弧形卡片设计。

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

}

```

上述代码创建了一个右半部分呈弧形的卡片。`clip-path` 提供了更多创造性可能，可以创建椭圆、多边形甚至路径裁剪等多种弧形效果。然而需要注意的是，`clip-path` 的浏览器兼容性不如 `border-radius` 理想。

---

### **三、创新方案：CSS Masks 打造灵活曲线**

**原理：**

CSS Masks 可以通过 `mask-image` 或 `mask-shape` 属性为元素添加遮罩，同样可以用来创建弧形卡片效果。

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

}

```

以上代码利用径向渐变作为遮罩，实现了卡片顶部弧形边缘的效果。CSS Masks 具有高度灵活性，可以用于创建更复杂的形状，但它的浏览器兼容性也相对有限。

---

### **结论与比较**

- **border-radius** 方法最为简单易用且兼容性最好，适合日常项目和快速原型设计；

- **clip-path** 提供了更丰富的形状裁剪能力，适合需要突破常规、追求独特视觉效果的场景；

- **CSS Masks** 能够创建基于图像或者渐变的复杂蒙版效果，适用范围较广，但需要注意旧版本浏览器的支持情况。

选择何种方式实现弧形卡片取决于项目的实际需求和兼容性要求。通过巧妙运用这些CSS特性，您可以轻松打造出别具一格的弧形卡片设计，增添网站的视觉吸引力。

---

**补充实践案例：**

对于一些高级应用场景，您还可以结合以上技术，比如使用CSS Grid布局和Flexbox进行容器布局，同时利用CSS变量和媒体查询适应不同屏幕尺寸，让弧形卡片设计更加灵活和响应式。

切记，在实际开发过程中，务必关注浏览器兼容性问题，必要时借助PostCSS、Autoprefixer等工具增强跨浏览器兼容性。同时，保持对新兴CSS特性的关注，与时俱进地更新您的设计与开发技术栈。

内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 1400+ 字，整篇阅读约需 2 分钟。

今天分享一段优质 CSS 代码片段，让文本和背景色混合产生一种独特的效果，就像下图这种。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

<div class="banner">
    <h1 class="title">每日分享一段优质代码片段，欢迎关注与投稿！</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;
    /* 关键点 */
    mix-blend-mode: difference; 
}

分享原因

这段代码展示了如何使用 CSS 和 HTML 创建一个带有背景图片和标题文本的横幅（banner），并且通过 mix-blend-mode: difference; 为标题文本添加混合模式效果。

mix-blend-mode 属性可以为元素设置混合模式，使其颜色与背景颜色混合，从而创建有趣的视觉效果。

这个效果在设计中很常见，能增加页面的视觉吸引力，强调和突出文本内容。

代码解析

1. banner 类

设置背景元素基础样式。

定义背景图片，以及让文本垂直水平居中对齐。

2. mix-blend-mode: difference;

这是一个关键设置。

使用了 mix-blend-mode: difference; ，这意味着标题文字的颜色将与其父元素（.banner）的背景颜色进行差值计算，产生类似于反相的效果。

在这种情况下，由于父元素（.banner）的背景是白色，而文字原本的颜色是白色，通过差值计算后，文字颜色就变成了黑色，从而让白色文字在白色背景上也能够显示。

3. mix-blend-mode 属性详解

mix-blend-mode CSS 属性描述了元素的内容应该与其直系父元素的内容和元素的背景如何混合。

它允许创建各种视觉效果，例如半透明效果、阴影、图片蒙版等。

以下是兼容性：

以下是一些常见的属性值：

normal：这是默认值，使用正常的颜色混合模式，不产生特殊混合效果。

multiply：将两个颜色的值相乘，会得到一个更暗的颜色，常用于创建阴影效果。

screen：将两个颜色的值相加，然后减去相乘的值，会得到一个更亮的颜色，可用于创建高光效果。

overlay：根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗，则使用 multiply 模式；如果背景颜色较亮，则使用 screen 模式。

darken：将两个颜色的值进行比较，使用较暗的那个颜色。

lighten：与 darken 相反，使用较亮的那个颜色。

color-dodge：将前景色分解为 RGB 分量，并将每个分量分别除以（1 减去背景色的对应分量），然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。这种模式会使颜色变亮。

color-burn：将前景色分解为 RGB 分量，并将每个分量分别除以背景色的对应分量，然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。它会使颜色变暗。

difference：将前景色减去背景色的值，并取绝对值，会导致一种反相的效果。

exclusion：将前景色和背景色的值相加，然后减去相乘的值的两倍，常用于创建反相效果，但其对比度比 difference 更低，颜色更柔和。

hue：将前景色的色相（hue）与背景色的饱和度（saturation）和亮度（lightness）混合，可在不改变亮度和饱和度的情况下改变颜色。

saturation：将前景色的饱和度与背景色的色相和亮度混合，用于在不改变颜色的情况下改变饱和度。

color：将前景色的色相、饱和度和亮度与背景色混合，会在改变所有颜色属性的情况下改变前景色的颜色。

luminosity：将前景色的亮度与背景色的色相和饱和度混合，可在不改变颜色的情况下改变亮度。

言

通常，我们为div盒子或者图片设置阴影使用 box-shadow 属性，代码如下：

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

问题抛出

使用 box-shadow 属性给div盒子设置阴影倒还好，如果用在透明的图片上，阴影会变成方形的，让其看起来像添加了一个边框一样。

解决方法

我们可以通过css的另一种参数，为透明png实现基于透明图片的阴影效果，效果如下图，左侧是 box-shadow ，右侧 drop-shadow 。

drop-shadow()说明：

drop-shadow() 是CSS中用于为图像或文本添加阴影效果的一个函数，‌它属于 filter 属性的一部分。‌这个函数允许你为元素创建阴影，‌而不需要考虑元素的形状或边界框。‌与 box-shadow 不同，‌drop-shadow 可以应用于非矩形形状，‌如透明的PNG或SVG图像，‌它使用元素的Alpha蒙版来决定阴影的形状。‌这意味着，‌即使元素没有背景，drop-shadow 也能为图像的非透明部分创建阴影。‌

drop-shadow()语法如下：

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

drop-shadow()参数说明如下：

offset-x：该参数设置图像的水平偏移量。正值创建右侧偏移，负值创建左侧偏移。
offset-y：此参数设置图像的垂直偏移量。正值创建到底部的偏移量，负值创建到顶部的偏移量。
blur-radius：设置模糊半径的值。它是一个可选参数。
spread-radius：设置传播半径的值。它是一个可选参数。
color：设置投影的颜色。它的可选参数。

演示代码如下：

<!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>

总结

尽管有很好的支持，但 drop-shadow 滤镜仍然没有得到充分的利用。我希望这篇文章强调了一些使用 box-shadow的情况，也许你可以在你的下一个项目中使用它！

在线咨询

上一篇：仅需 5 步，用 JavaScript 直接通过前端发送电子邮件
下一篇：一文了解前端三剑客（HTML5+CSS+JS）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 实现弧形卡片的 3 种方式

言

问题抛出

解决方法

演示代码如下：

总结

您的项目需求