用CSS制作弧形卡片的三种创意方法!

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

在这里插入图片描述

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

一、border-radius

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

div{border-radius: 20px;
}

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

在这里插入图片描述

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

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

这表示,圆角是一个x半径为20pxy半径为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 (codepen.io)

四、优缺点总结

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

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

学习资料:点此下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/699252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧校园的未来已来!AI与数字孪生领航教育新时代

随着科技的飞速发展,人工智能(AI)和数字孪生技术正逐渐渗透到我们生活的方方面面,而在教育领域,它们的结合更是催生出一种全新的智慧校园模式。这种模式的出现,不仅预示着教育管理方式的彻底变革&#xff0…

网络原理 - HTTP/HTTPS(5)

HTTPS HTTPS也是一个应用层协议.在HTTP协议的基础上引入了一个加密层. HTTP协议内容都是按照文本的方式明文传输的. 这就导致了在传输过程中出现了一些被篡改的情况. 臭名昭著的"运营商劫持" 下载一个天天动听. 未被劫持的效果,点击下载按钮,就会弹出天天动听的…

【linux】常见指令 -通配符,数据管道,重定向,压缩打包...

目录 前言 基本指令 ls命令 常见选项 ​编辑 pwd命令 cd 指令 常见选项 touch指令 mkdir指令 常见选项 rm 指令 常见选项 man指令 cp指令 常用选项: mv指令 常用选项 nano指令 如何写入且执行文件? cat指令 常用选项 more指令…

基于RK3399 Android11适配OV13850 MIPI摄像头

目录 1、原理图分析2、编写和配置设备树3、调试方法4、遇到的问题与解决5、补丁 1、原理图分析 从上图可看出,我们需要关心的,①MIPI数据和时钟接口使用的是MIPI_TX1/RX1 ②I2C使用的是I2C4总线 ③RST复位引脚使用的是GPIO2_D2 ④PWDN使用的是GPIO1_C7 ⑤…

【Python笔记-设计模式】外观模式

一、说明 外观模式是一种结构型设计模式,能为程序库、框架或其他复杂类提供一个统一的接口。 (一) 解决问题 简化复杂系统的接口调用 (二) 使用场景 简化复杂系统:需要一个指向复杂子系统的直接接口, 且该接口的功能有限时重构复杂的代码…

unity ui界面优化

优化一个比较复杂的界面,里面有多个rt和组件。 在初次打开这个界面的时候会发生1s多的卡顿,还是非常严重的。 分析 通过profiler分析 1.打开界面时卡顿。 分析:除了update和dotween相关逻辑,主要在于打开时的lua function调用…

幻兽帕鲁(Palworld 1.4.1)私有服务器搭建(docker版)

文章目录 说明客户端安装服务器部署1Panel安装和配置docker服务初始化设置设置开机自启动设置镜像加速 游戏服务端部署游戏服务端参数可视化配置 Palworld连接服务器问题总结 说明 服务器硬件要求:Linux系统/Window系统(x86架构,armbian架构…

[程序员] sipp运行时socket接收队列持续满载 - 文件系统访问慢

​今天谈一下,最近和同事一块看到的一个例子,说sipp运行时的某一时刻之后,总是会有408/487/retrans,通过netstat看,还总是会出现接收队列满载的情况。如下netstat的输出,137472是接收队列的缓存的数据量: udp 131072 0 100.103.238.11:5060 0.0.0.0:* 20175/sipp.lates…

spring boot3登录开发-3(账密登录逻辑实现)

⛰️个人主页: 蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途。 目录 前置条件 内容简介 用户登录逻辑实现 创建交互对象 1.创建用户登录DTO 2.创建用户登录VO 创建自定义登录业务异…

K8S简单学习

目录 安装启动第一个服务启动k8s看板暴露服务查看services自动打开服务查看pods 官方的文档 安装 centos8安装记录 pod和deployment的关系 启动第一个服务 通过deployment的方式进行创建 kubectl create deployment hello-nginx --imagenginx:latest --port8080启动k8s看板…

如何使用ChatGPT创建一份优质简历

目录 第一步:明确目标和重点 第二步:与ChatGPT建立对话 第三步:整理生成的内容 第四步:注重行文风格 第五步:强调成就和量化结果 第六步:个性化和定制 第七步:反复修改和完善 总结 在现…

分类预测 | Matlab实现KPCA-ISSA-LSSVM基于核主成分分析和改进的麻雀搜索算法优化最小二乘支持向量机故障诊断分类预测

分类预测 | Matlab实现KPCA-ISSA-LSSVM基于核主成分分析和改进的麻雀搜索算法优化最小二乘支持向量机故障诊断分类预测 目录 分类预测 | Matlab实现KPCA-ISSA-LSSVM基于核主成分分析和改进的麻雀搜索算法优化最小二乘支持向量机故障诊断分类预测分类效果基本描述程序设计参考资…

【软件测试】定位前后端bug总结+Web/APP测试分析

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、Web测试中简单…

爬虫项目(下)

1..string 属性是用来获取节点中标签内容。 for content in content_all:contentString content.stringprint(contentString) .string 属性只能提取单个节点或节点统一的内容。 提取节点包含多个子节点时:使用这个属性时,不清楚应该调用哪个节点的内容&#xff…

k8s-pod的介绍及命令行创建pod

一、 pod介绍 在kubernetes的世界中,k8s并不直接处理容器,而是使用多个容器共存的理念,这组容器就叫做pod。 pod是k8s中可以创建和管理的最小单元,是资源对象模型中由用户创建或部署的最小资源对象模型,其他的资源对象…

【LeetCode-213】打家劫舍II(动态规划)

题目链接 目录 题目描述 解法1:动态规划 代码实现 题目链接 题目描述 你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 ,这意味着第一个房屋和最后一个房屋是紧挨着的。同…

车载测试面试:题库+项目

车载测试如何面试(面试技巧)https://blog.csdn.net/2301_79031315/article/details/136229809 入职车载测试常见面试题(附答案)https://blog.csdn.net/2301_79031315/article/details/136229946 各大车企面试题汇总(含答案&am…

Megalinter 初体验

简介 MegaLinter 是一个多语言、多工具的集成代码检查工具,它能够通过一个统一的工作流来运行多个静态代码分析工具,从而提供全面的代码质量检查。 官网:https://megalinter.io/latest/ MegaLinter 的特点: 多语言支持&#x…

Arcgis小技巧【17】——如何修改ArcGIS中影像的背景颜色

一、问题分析 在ArcGIS中,有时候会遇到影像有背景色,看上去很不美观。 尤其在多个影像叠加的时候,更是会造成遮挡的问题。 二、解决办法 首先,用【识别】工具在背景色是点击一下,查看弹出的窗口,记住背景…

新型智慧城区建设方案

智慧社区项目以改善基础设施环境为基础,以搭建社区综合服务平台为纽带,通过利用物联网、大数据技术建立覆盖社区居民生活方方面面的综合服务体系,向社区管理机构、服务机构和居民提供智能化服务,保障社区的安全,保障居…