【样式】Html CSS卡片样式

原创

已于 2024-09-09 20:48:49 修改 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

于 2024-03-20 15:15:56 首次发布

【样式】Html 卡片样式

    .card {
      width: calc(40% - 10px);
      height: 160px;
      display: inline-block; /* 或者 flex / block 根据布局需求 */
      position: relative;
      margin: 10px; /* 添加边距以确保卡片之间有间距 */
      padding: 15px; /* 内边距为内容提供空间 */
      background-color: rgba(255, 255, 255, 0.3); /* 卡片背景色 */
      border-radius: 6px; /* 圆角效果 */
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* 阴影效果，可以根据需要调整参数 */
      transition: all 0.3s ease; /* 添加过渡效果，如：hover时的动画 */
     
      
      /* 高斯模糊 */
     backdrop-filter: blur(2px); /* 应用模糊效果到背景（包括其下面的内容） */
     
      /* 可选，添加内边框或外边框 */
      border: 1px solid #ddd;
    
      /* 其他自定义样式，例如最大宽度、对齐方式等 */
      max-width: 300px;
      text-align: center;
      
    }

    
    /*
    .card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(''); /* 设置背景图片 */
      background-size: cover;