css布局卡片阴影圆角实现方法-css教程-PHP中文网

css布局卡片阴影圆角实现方法

P粉602998670

发布： 2025-11-22 17:31:46

原创

404人浏览过

答案：通过border-radius设置圆角，box-shadow添加阴影，二者结合可创建美观的卡片布局。示例中.card使用12px圆角和0 4px 12px rgba(0,0,0,0.1)阴影，并在hover时增强阴影以提升交互体验。

css布局卡片阴影圆角实现方法

实现卡片阴影和圆角效果主要依靠 CSS 的 box-shadow 和 border-radius 属性。这两个属性配合使用，可以轻松打造现代、美观的卡片式布局。

1. 设置圆角边框（border-radius）

通过 border-radius 可以让卡片四角变得圆润，常见值有像素值或百分比。

• 使用固定像素值：适合大多数场景，如 8px、12px
• 使用百分比：适合圆形或接近正方形的元素，如头像卡片
• 四个角分别设置：可自定义每个角的弧度，例如 border-radius: 8px 16px 8px 0;

示例：

.card {
  border-radius: 12px;
}

登录后复制

2. 添加阴影效果（box-shadow）

box-shadow 能为卡片增加立体感，常用参数包括水平偏移、垂直偏移、模糊半径、扩散半径和颜色。

立即学习“前端免费学习笔记（深入）”；

ClipDrop

Stability.AI出品的图片处理系列工具（背景移除、图片放大、打光）

112

查看详情

• 常见浅色阴影：0 4px 12px rgba(0,0,0,0.1)
• 多层阴影可增强层次感，用逗号分隔多个阴影值
• 阴影颜色推荐使用透明度较低的黑色或主题色，避免过于突兀

示例：

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

登录后复制

3. 完整卡片样式示例

结合背景色、内边距等属性，构建完整卡片：

.card {
  width: 300px;
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease; /* 鼠标悬停时平滑过渡 */
}
<p>.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}</p>

登录后复制

hover 效果能提升交互体验，让用户感知卡片可点击或可操作。

基本上就这些。合理调整圆角和阴影参数，就能适配多数设计需求。

以上就是css布局卡片阴影圆角实现方法的详细内容，更多请关注php中文网其它相关文章！