css制作便签

使用CSS制作便签效果

通过CSS可以轻松实现便签或便利贴的视觉效果，包括纸张质感、卷角、阴影等细节。以下是几种常见的实现方法：

基础便签样式

设置背景色、边框和阴影模拟纸张效果：

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

添加卷角效果

使用伪元素创建右下角卷曲效果：

.note::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(45deg, #fff 50%, transparent 50%);
  box-shadow: -1px -1px 2px rgba(0,0,0,0.2);
}

斜线背景纹理

通过重复线性渐变创建便签常见的斜线纹理：

.note {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(0,0,0,0.05) 5px,
    rgba(0,0,0,0.05) 6px
  );
  background-color: #ffffa5;
}

3D立体效果

添加多重阴影和变换增强立体感：

.note {
  transform: rotate(1deg);
  box-shadow: 
    1px 1px 0 rgba(0,0,0,0.1),
    3px 3px 0 rgba(0,0,0,0.05),
    5px 5px 5px rgba(0,0,0,0.2);
}

彩色便签变体

通过CSS变量轻松创建不同颜色的便签：

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

.note.blue { --note-color: #a5d8ff; }
.note.pink { --note-color: #ffd6ff; }
.note.green { --note-color: #c8e7a5; }

完整HTML示例

结合上述CSS的完整实现：

<div class="note">
  <h3>购物清单</h3>
  <ul>
    <li>牛奶</li>
    <li>鸡蛋</li>
    <li>面包</li>
  </ul>
</div>

这些技术可以组合使用，通过调整尺寸、颜色和阴影参数，能创造出各种风格的便签效果。实际应用中，可以添加JavaScript交互实现拖动、旋转或颜色切换功能。