CSS卡片阴影与圆角实现技巧

想让你的网页卡片更具吸引力？本文教你使用CSS轻松实现卡片阴影和圆角效果！通过`border-radius`属性设置圆角，让卡片边缘更加柔和，常用数值包括8px、12px，甚至可以设置为50%打造圆形卡片。利用`box-shadow`属性添加阴影，模拟卡片悬浮效果，增强视觉层次感，例如`0 2px 8px rgba(0,0,0,0.1)`可实现轻微阴影。结合背景、内边距以及`:hover`状态下的阴影变化，打造更具动态和交互性的卡片，提升用户体验。快来学习如何使用CSS的`border-radius`和`box-shadow`属性，让你的网页设计更上一层楼！

使用border-radius和box-shadow可创建卡片效果：1. border-radius设置圆角，如8px或50%圆形；2. box-shadow添加阴影，如0 2px 8px rgba(0,0,0,0.1)实现悬浮感；3. 结合背景、内边距及:hover状态增强交互，使卡片更具层次与动态效果。

在CSS中制作卡片的阴影与圆角，主要使用 box-shadow 和 border-radius 属性。这两个属性配合使用，可以让元素看起来像一张悬浮的卡片，常用于UI设计中的信息展示。

1. 设置圆角（border-radius）

通过 border-radius 可以让矩形元素的四个角变成圆角：

数值越大，圆角越明显。常用值有 4px、8px、12px。也可以设置不同的值，例如：

• border-radius: 8px 16px 8px 0; —— 分别设置四个角
• border-radius: 50%; —— 制作圆形卡片

2. 添加阴影（box-shadow）

box-shadow 用于创建投影效果，使卡片看起来“浮起”于页面之上。基本语法为：

常用示例：

• box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); —— 轻微阴影，适合大多数卡片
• box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); —— 更明显的悬浮感
• box-shadow: 0 0 0 1px #e0e0e0; —— 加一层浅边框，增强层次

3. 完整的卡片样式示例

结合背景、内边距和上述属性，可以写出一个典型的卡片样式：

你还可以在:hover状态下增强阴影，实现悬停浮起效果：

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~