[分享]css3卡片选中效果

CSS3卡片选中效果是一种为网站增添美观度的方式。在这种效果下，用户点击卡片时，卡片会有一个明显的选中状态。.card { width: 250px; height: 250px; backgroun...

CSS3卡片选中效果是一种为网站增添美观度的方式。在这种效果下，用户点击卡片时，卡片会有一个明显的选中状态。

.card {
  width: 250px;
  height: 250px;
  background: #ddd;
  border-radius: 10px;
  transition: box-shadow 0.3s;
}

.card:hover,
.card:focus {
  outline-style: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 0, 0, 0.3);
} 

在上述代码中，我们首先定义了一个名为“.card”的样式，它的宽度和高度分别设置为250px，背景颜色设置为#ddd，并使用border-radius属性设置卡片的边框为10px的圆角。

接下来，我们使用CSS3的transition属性设置鼠标悬浮或对卡片进行焦点操作时产生的效果。其中box-shadow属性设置卡片的阴影效果。在卡片处于未选中状态时，box-shadow的值为0，不会产生阴影效果；当鼠标移动到卡片上时，box-shadow的值会从0转变为0 0 5px rgba(0, 0, 0, 0.3)，此时卡片会出现一个阴影；当用户在卡片上点击它时，卡片会出现更加明显的阴影效果，这里的box-shadow值会从0 0 5px rgba(0, 0, 0, 0.3)变为0 0 10px rgba(0, 0, 0, 0.3)，最后变为0 0 20px rgba(0, 0, 0, 0.3)。

以上就是CSS3卡片选中效果的实现方法，通过设置box-shadow属性，可以为网站增加一些美观度，提升用户体验。以上代码也可以根据具体场景进行更改，以满足不同的需求。