当前位置：首页 > 科技 > 软件

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

来源：责编：时间：2023-12-04 17:26:56 211观看

导读在平时开发中，有时候会碰到下面这种“弧形”样式，主要分为“内凹”和“外凸”两种类型，如下图片该如何实现呢？或者想一下，有哪些 CSS 属性和“弧形”有关？下面介绍 3 种方式，一起看看吧一、border-radius通常情况下，我们用bor

在平时开发中，有时候会碰到下面这种“弧形”样式，主要分为“内凹”和“外凸”两种类型，如下

图片

该如何实现呢？或者想一下，有哪些 CSS 属性和“弧形”有关？下面介绍 3 种方式，一起看看吧

一、border-radius

通常情况下，我们用border-radius都是这样

div{  border-radius: 20px;}

这样表示 4 个角都是圆角，并且是标准的正圆

图片

其实，border-radius还支持斜杠的写法，比如

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

这表示，圆角是一个x半径为20px，y半径为10px的椭圆，如下

图片

放大来看，其实是这样的

图片

进一步，我们将x半径设置成50%，这样就能得到一个完整的弧形了

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

效果如下

图片

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

至于“内凹”弧形，单纯的border-radius表示无能为力，可以看接下来的方式

二、伪元素+border-radius

这个其实大多数同学都能想到的方式，一个矩形和一个椭圆组合起来，不就是一个弧形卡片了吗？原理非常简单

图片

用代码实现就是

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裁剪多余部分，可以得到一个边缘比较“锋利”的弧形，如下所示

图片

另外，用伪元素还能实现“内凹”的效果，不过这需要反过来思考，什么意思呢？之前是给伪元素加的背景，现在需要加在伪元素的外围，这里用box-shadow实现，原理如下

图片

用代码实现就是

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

效果如下（虚线表示伪元素的边缘）

图片

三、径向渐变

提到圆弧，还可以想到径向渐变，没错，这里通过径向渐变也能轻易实现弧形卡片效果。

先来看“外凸”的，其实思路和伪元素一样，先拆分，一个椭圆和一个矩形，对应的就是径向渐变（radial-gradient）和线性渐变(linear-gradient)，如下

图片

用代码实现就是

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;}

效果如下（紫色部分是径向渐变）

图片

再来看“内凹”的弧形，其实也和伪元素思路类似，只不过这里需要绘制一个足够大的渐变，从透明到纯色的径向渐变，示意如下

图片

调整好渐变中心点，用代码实现就是

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

效果如下（全部都是径向渐变绘制）

图片

当然你也可以随意改变径向的弧度和大小，来实现各种不同的效果。

以上所有demo都可以查看以下在线链接

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

四、优缺点总结

以上就是本文的全部内容了，共介绍了 3 种不同的方式，下面总结一下各自优缺点

border-radius 支持斜杠语法，可以单独控制圆弧的x、y半径，实现“外凸”圆弧最简单，缺点是圆弧不能自定义弧度，也不能实现“内凹”效果
伪元素最符合常规思维，可以解决以上问题，缺点是需要占用伪元素，略微麻烦
渐变实现和伪元素拼接思路类似，缺点是语法复杂，需要熟练掌握渐变语法

[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.28at.com/showinfo-26-37684-0.htmlCSS 实现弧形卡片的三种方式

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Python 数据库操作模块大揭秘：带你轻松掌握这六种常见模块！

下一篇： 2023软件架构和设计的趋势

标签：

热门焦点

JavaScript 混淆及反混淆代码工具

介绍在我们开始学习反混淆之前，我们首先要了解一下代码混淆。如果不了解代码是如何混淆的，我们可能无法成功对代码进行反混淆，尤其是使用自定义混淆器对其进行混淆时。什么是混
企业采用CRM系统的11个好处

客户关系管理（CRM）软件可以为企业提供很多的好处，从客户保留到提高生产力。　　CRM软件用于企业收集客户互动，以改善客户体验和满意度。　　CRM软件市场规模如今超过580
三言两语说透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术，可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化和反柯里化的概念、实现原理和应用
JavaScript学习 -AES加密算法

引言在当今数字化时代，前端应用程序扮演着重要角色，用户的敏感数据经常在前端进行加密和解密操作。然而，这样的操作在网络传输和存储中可能会受到恶意攻击的威胁。为了确保数据
品牌洞察丨服务本地，美团直播成效几何？

来源：17PR7月11日，美团App首页推荐位出现“美团直播”的固定入口。在直播聚合页面，外卖“神枪手”直播间、美团旅行直播间、美团买菜直播间等均已上线，同时
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
OPPO、vivo、小米等国内厂商Q2在印度智能手机市场份额依旧高达55%

7月20日消息，据外媒报道，研究机构的报告显示，在全球智能手机出货量同比仍在下滑的大背景下，印度这一有潜力的市场也未能幸免，出货量同比也有下滑，多家厂
华为Mate 60保护壳曝光：硕大后置相机模组凸起程度有惊喜

这段时间以来，关于华为新旗舰的爆料日渐密集。据此前多方爆料，今年华为将开始恢复一年双旗舰战略，除上半年推出的P60系列外，往年下半年的Mate系列也将