当前位置：首页 > CSS

css制作便签

2026-02-27 02:53:16CSS

使用CSS制作便签效果

通过CSS可以创建视觉上类似便签纸的效果，结合HTML结构实现交互性。以下是几种常见的实现方式：

基础便签样式

通过背景色、阴影和旋转角度模拟真实便签：

css制作便签

.note {
  width: 200px;
  height: 200px;
  background: #fffd75; /* 经典黄色便签色 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  transform: rotate(2deg);
  padding: 15px;
  font-family: 'Comic Sans MS', cursive;
  position: relative;
}

卷角效果

使用伪元素创建折角视觉效果：

.note::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px;
  border-color: transparent #f5f5a1 #f5f5a1 transparent;
}

悬浮动画

添加悬停时的动态效果增强交互：

css制作便签

.note:hover {
  transform: rotate(0deg) scale(1.05);
  transition: all 0.3s ease;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

多色便签系统

通过CSS变量实现不同颜色的便签：

.note {
  --note-color: #fffd75;
  background: var(--note-color);
}

.note.pink { --note-color: #ffb6c1; }
.note.blue { --note-color: #add8e6; }
.note.green { --note-color: #98fb98; }

网格布局示例

多个便签在网格中的排列方式：

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.note {
  margin: 10px;
  break-inside: avoid; /* 防止内容被分割 */
}

完整HTML结构示例

<div class="notes-grid">
  <div class="note">
    <h3>购物清单</h3>
    <p>牛奶、面包、鸡蛋</p>
  </div>
  <div class="note pink">
    <h3>会议提醒</h3>
    <p>周三14:00产品评审</p>
  </div>
</div>

通过调整阴影强度、旋转角度和颜色参数，可以创建不同风格的便签效果。现代CSS特性如clip-path还可以实现更复杂的形状切割效果。