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

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

---

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

**简介：**

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

```html

<div class="card-rounded">

<!-- 卡片内容 -->

</div>

```

```css

.card-rounded {

background-color: #f5f5f5;

width: 200px;

height: 100px;

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

overflow: hidden;

}

```

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

---

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

**介绍：**

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

```html

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

<!-- 卡片内容 -->

</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 class="card-mask">

<!-- 卡片内容 -->

</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特性的关注，与时俱进地更新您的设计与开发技术栈。

css3之前，并没有直接的设置元素圆角的属性，那如何实现设计图中的圆角设定呢？

如：表单demo中的文本框圆角。

一般通过在PS 软件中截取上左、上右、下左、下右四个边角的圆角图片，通过background-position背景图属性设定位置，从而实现圆角的设定。

或是将四个圆角图片当做四个img标签，通过position定位属性找寻设定的位置，如：

在IE6、7、8还比较盛行的时候，如果要兼容到IE浏览器，需要使用CSS hack兼容IE浏览器版本，高级浏览器可以直接使用border-radius属性设定圆角，对低版本浏览器使用图片定位的方式实现设计图呈现。但随着近几年浏览器版本的不断更新迭代，我们需要做的就是，如果需要兼容低版本浏览器，只需保证呈现正常即可，无需过分的追求展示效果与设计图的还原度。但实现的思想在web布局中是很重要的。

查 郭一璞 发自 凹非寺
量子位 报道 | 公众号 QbitAI

HTML不是编程语言，但这并不妨碍精通它的大佬玩出花来。

普通的前端，用HTML+CSS制作网页，元素简单，工具丰富。

大佬级前端，用HTML+CSS绘画，全程不用PS、AI这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。

把代码转换之后，就变成了鲜嫩的水果：

或者画出洛可可风格的古典女性肖像：

还有弗拉芒巴洛克肖像风格的人物画像，充满了中世纪的禁欲感：

现代的也有，比如这位在粉色灯光下的着礼服的妹子：

以及充满者50年代气息的复古风人物海报：

曲线、光影、渐变，每个元素都相当复杂。

而且，创作过程中不用SVG，只用Atom文本编辑器和Chrome开发者工具。

也就是说，画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱，都是一行行代码从头敲出来的！

如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，让学计算机的同学觉得“别人写的这么艺术，一定是我的教科书打开方式不对”。

真·交叉学科大佬。

它们的作者，是湾区前端大神Diana Smith小姐姐，她目前是企业及软件开发商Atlassian的一名资深Web开发。

绘制过程

Diana在专门讨论CSS的网站CSS-Tricks写下了详细的教程。

画出这样一个图形分成几步？

如果不用CSS，一般都是直接嵌入这个特殊的图形。

如果用CSS，那么就从黑色矩形开始，然后在两侧加上上两个

与白色背景颜色匹配的边框半径元素。

先画出一个黑色矩形，然后两边用圆弧遮挡。有了基础形状后，下一步就是给它添上渐变的背景。但是如果用矩形方式填充，得到的效果就是这样的：

Diana的办法是：在保留矩形的同时，加上两个弯曲的div，把凹进去的部分也填充上。

最后完整的代码是这样的：

div{
  width: 500px;
  height: 350px;
  background: #000;
  position: relative;

  &::after, &::before{
    width: 20%;
    height: 100%;    
    position: absolute;
    top: 0;
    z-index:2;
    content: "";    

    background: #1e5799; 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); 
  }

  &::after{
    border-radius: 100% 0% 0% 100%;   
    right: 0;
  }

  &::before{
    border-radius: 0 100% 100% 0;   
    left: 0;
  }   
}

body{
  background: #1e5799; 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); 
}

你也可以去这个完成查看CSS样式的实际运行效果：

https://codepen.io/jean-jordan/pen/KeKaBw

刚刚我们画的那幅画像不像人的脖子？好的，我们再回到人像画上，Diana绘制人物的脖子也是类似的过程。

在上面这张图里，我们看到了Diana如何逐步改形状，最终得到了油画中人物的脖子。

但是仅仅会画各种几何形状，是无法生成艺术品的，Diana总结了她在绘图中的5个重要CSS属性。

1、边界半径（border-radius）

边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。

border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;

2、盒子阴影（box-shadow）

对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到html容器的边缘，也会沿着边界半径定义的边缘。

box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;

开发者可以指定模糊半径，以及阴影是向内延伸还是向外延伸。

3、变形（transform）

变形的主要方式有：旋转（rotate）、缩放（scale）和倾斜（skew）

transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);

此外还有透视，让物体产生远小近大的视觉效果，或者是仅仅为画出一个梯形。

transform: perspective(10px) rotateY(5deg);

4、线性梯度（linear-gradient）和径向梯度（radial-gradient）

线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果

background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);

5、层叠（overflow）

层叠是一种将大量杂乱元素填充到一个整齐的包中的方法，可以创建一些有趣的形状。在变形那部分的基础上使用hidden参数，可以把边缘遮盖起来。

overflow: hidden;

以上5种元素缺一不可，随便少一种都会产生怪异的效果。

△从左至右分别是缺少边界半径、阴影、变形、梯度、层叠的效果（点击查看大图）

不过即使这样，也很有抽象艺术的美感，仿佛在看毕加索的作品。

只适用于Chrome

不过，由于这是一个纯个人艺术创作，Diana小姐姐并不关心浏览器适配性。

因此，这些代码在Chrome里可以完美展现，但如果用其他浏览器打开，可能就会出现不一样的效果。

比如，MAC上的Safari浏览器打开，妹子的眼睛就方了：

肩膀上的高光，变成了一个大圈圈：

胸前的礼服上，也被泼了一道墨：

如果用早期的Chrome打开，会出现惊悚的头身分离的效果：

早期的Opera浏览器，打开之后脸方了：

Windows 7上从IE 6到IE 11，显示出来的都是这个鬼样子：

浓重的线条，甚至有点抽象艺术的感觉。

同样是早期IE，放到Mac上也一样鬼畜，这是IE 5.1.7的效果：

还有人试了试，在Windows 98系统的IE 7浏览器打开，会变成非常像素风的样子：

最恐怖的是三星手机上的夜间模式打开：

连人种都变了啊！

其他的几张画，换个浏览器打开也比较鬼畜。

妹子你bra里的钢圈出来了啊！

拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。

最后，如果你在iPhone上装了Chrome，出来的也是Safari的效果，想看完整效果的话，请在安卓手机或者电脑的Chrome上打开。

因此，有不少网友都觉得，这几幅画可以当成浏览器测试项目，一试就能知道内核用的是谁家的。

反向绘图

CSS太难，学不会？不要紧，虽然我们不能把代码变成图片，但是可以把图片变成代码啊。

没错，就是ASCII艺术，早在DOS时期，就有人用命令行界面来显示图片。直到今天已成为一种流行的互联网文化。

用单色字符来画出世界名画已经不算新鲜事。最近又有个码农开发了一个新的项目Primg，让任何一幅画都可以用质数来表示。

比如蒙拉丽莎，就可以用一个3万位的质数二进制方式绘制出来。

传送门：

作者的GitHub：https://github.com/cyanharlow

作者博客主页：https://diana-adrianne.com/

教程：https://css-tricks.com/solving-lifes-problems-with-css/

用质数生成任意ASCII艺术：https://github.com/geonnave/primg

— 完 —

量子位 QbitAI · 头条号签约作者

关注我们，第一时间获知前沿科技动态