css制作卡片阴影与圆角结合-css教程-PHP中文网

css制作卡片阴影与圆角结合

P粉602998670

发布： 2025-10-23 09:38:01

原创

275人浏览过

卡片通过CSS的border-radius和box-shadow可实现圆角与阴影效果，.card设置12px圆角和0 4px 8px rgba(0,0,0,0.1)阴影，hover时增强为0 8px 16px rgba(0,0,0,0.15)并上移2px，配合transition实现平滑动画，提升层次与交互感。

css制作卡片阴影与圆角结合

卡片阴影与圆角是网页设计中常见的视觉效果，能让内容区域更立体、美观。使用 CSS 可以轻松实现圆角边框（border-radius）和阴影（box-shadow）的结合，让卡片看起来更有层次感。

基本结构：HTML 卡片容器

先创建一个简单的卡片结构：

<div class="card">
<p>这里是卡片内容</p>
</div>

添加圆角与阴影样式

通过 border-radius 设置圆角，box-shadow 添加阴影，两者可同时作用于元素。

示例 CSS：

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

.card {
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

优化阴影层次感

想要更自然的阴影效果，可以使用多层阴影或调整偏移值。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

推荐设置：

轻微垂直偏移（如 4px）
适当模糊半径（8px–16px）
透明黑色（rgba 或 hsla）避免颜色生硬
配合 hover 效果增强交互感

带悬停抬升效果的增强版：

.card {
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

圆角和阴影结合的关键是确保 border-radius 和 box-shadow 协同工作，浏览器会自动让阴影也呈现圆角轮廓。基本上就这些，不复杂但容易忽略细节。

以上就是css制作卡片阴影与圆角结合的详细内容，更多请关注php中文网其它相关文章！