[分享]css做成卡片效果图

CSS是网页设计中不可或缺的一部分，它可以实现丰富的效果来增强网站的视觉体验。其中，卡片效果图是一个非常常见的效果，可以用来展示产品、作品、新闻等内容。.card { width: 300px; he...

CSS是网页设计中不可或缺的一部分，它可以实现丰富的效果来增强网站的视觉体验。其中，卡片效果图是一个非常常见的效果，可以用来展示产品、作品、新闻等内容。

.card {
  width: 300px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}

.card .title {
  font-size: 18px;
  margin: 0 0 5px;
}

.card .description {
  font-size: 14px;
  margin: 0;
} 

上述代码实现了一个简单的卡片效果图，包括了卡片的背景色、阴影、圆角、内容超出部分的隐藏，以及当鼠标悬停在卡片上时，内容透明度变化的特效。

其中，主要的样式设定在.card类中，包括背景色、阴影、圆角等，而内容设定在.card .content类中，包括了内容的位置、背景色、内容填充等。

卡片效果图还可以根据具体需求定制更多的样式，例如字体大小、颜色、内容、边框等，以满足视觉效果的需求。