css制作展示卡

基础展示卡结构

使用HTML和CSS创建一个简单的展示卡容器。HTML部分定义卡片的基本结构，CSS设置样式。

<div class="card">
  <img src="image.jpg" alt="示例图片">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>卡片描述内容</p>
    <button>点击按钮</button>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

卡片图片样式

设置卡片图片的响应式显示效果，保持比例并限制高度。

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

内容区域样式

定义卡片内容区域的间距和排版，确保文字清晰可读。

.card-content {
  padding: 15px;
}

.card-content h3 {
  margin-top: 0;
  color: #333;
}

.card-content p {
  color: #666;
  line-height: 1.5;
}

交互按钮设计

为卡片添加交互按钮，包括悬停效果和基础样式。

.card-content button {
  background-color: #4285f4;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.card-content button:hover {
  background-color: #3367d6;
}

悬停动画效果

为整个卡片添加悬停动画，提升交互体验。

.card {
  transition: transform 0.3s, box-shadow 0.3s;
}

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

响应式布局调整

使用媒体查询确保卡片在不同设备上的显示效果。

@media (max-width: 600px) {
  .card {
    width: 100%;
    margin-bottom: 20px;
  }
}

高级阴影效果

使用CSS滤镜为卡片添加更复杂的阴影效果。

.card {
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1));
}

圆角渐变边框

为卡片添加渐变边框和圆角效果。

.card {
  position: relative;
  background: white;
  border-radius: 16px;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  z-index: -1;
}