HTML使用CSS圆角边框和背景渐变实现许愿墙的效果

HTML 和 CSS 可以结合创建出美观的许愿墙效果。首先，我们使用 HTML 创建一个基本的元素结构，比如一系列的 `<div>` 元素代表愿望卡片：

<div class="wish-card">
  <h2>愿望标题</h2>
  <p>愿望内容</p>
  <button>删除</button>
</div>

接下来，用 CSS 来添加样式：

1. 圆角边框：
使用 `border-radius` 属性给 `.wish-card` 加上圆角。例如，设置顶部、底部和左右边角都为 10px 的圆形边缘：

   .wish-card {
     border: 1px solid #ccc;
     border-radius: 10px;
   }

2. 背景渐变：
利用 `background-image` 和 `background-size` 设置背景渐变，通常选择从浅色到深色的颜色过渡。例如：

   .wish-card {
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.9) 100%);
   }

3. 整体布局：
如果想让许愿墙有动态滚动效果，可以使用 `overflow-y: scroll;` 和适当的高度。

最后，为了使“删除”按钮也响应鼠标悬停事件，可以增加一些交互效果：

.wish-card button:hover {
  background-color: #ccc;
  cursor: pointer;
}