css制作便签
CSS 制作便签效果
使用CSS可以轻松创建类似便签的视觉效果，常见设计包括纸张质感、卷边效果、阴影或倾斜角度。以下是几种实现方法：
基础便签样式 通过背景色、边框和阴影模拟便签纸：
.note {
width: 200px;
height: 200px;
background: #fffacd; /* 浅黄色背景 */
padding: 15px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* 阴影效果 */
border-radius: 0 0 5px 5px; /* 底部圆角 */
font-family: 'Handwriting', cursive;
position: relative;
}卷边效果 使用伪元素创建右上角卷边：
.note::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background: linear-gradient(225deg, #fff 45%, #ddd 50%, #ccc 56%);
box-shadow: -1px 1px 2px rgba(0,0,0,0.2);
border-radius: 0 0 0 5px;
}倾斜效果 通过transform属性实现立体感：
.note {
transform: rotate(1deg);
transition: transform 0.3s;
}
.note:hover {
transform: rotate(0deg) scale(1.05);
}网格线便签 添加背景图案模拟横线：
.lined-note {
background: linear-gradient(#fffacd 1px, transparent 1px);
background-size: 100% 24px;
background-position: 0 10px;
line-height: 24px;
}完整示例代码
<style>
.post-it {
width: 250px;
height: 250px;
background: #fffea5;
padding: 20px;
font-family: 'Comic Sans MS', cursive;
box-shadow: 5px 5px 7px rgba(0,0,0,0.3);
transform: rotate(-3deg);
position: relative;
}
.post-it::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-width: 15px;
border-style: solid;
border-color: #fff #fff transparent transparent;
box-shadow: -2px 2px 3px rgba(0,0,0,0.2);
}
</style>
<div class="post-it">
<h3>购物清单</h3>
<ul>
<li>牛奶</li>
<li>面包</li>
<li>鸡蛋</li>
</ul>
</div>进阶技巧
颜色变体 通过CSS变量快速切换不同颜色主题：
:root {
--note-yellow: #fffea5;
--note-pink: #ffb8d1;
--note-blue: #b4d8fa;
}
.note-yellow { background: var(--note-yellow); }
.note-pink { background: var(--note-pink); }
.note-blue { background: var(--note-blue); }堆叠效果 多个便签错落排列：
.note-stack {
position: relative;
}
.note-stack div {
position: absolute;
width: 90%;
height: 90%;
}
.note-stack div:nth-child(1) { transform: rotate(3deg); z-index: 1; }
.note-stack div:nth-child(2) { transform: rotate(-2deg); z-index: 2; }
.note-stack div:nth-child(3) { transform: rotate(1deg); z-index: 3; }这些方法可根据实际需求组合使用，通过调整尺寸、颜色和变形参数可获得各种风格的便签效果。
