css 制作书签
使用 CSS 制作书签效果
通过 CSS 可以创建视觉上的书签效果，通常用于标记网页中的重点内容或导航。以下是几种实现方法：
基础书签样式
.bookmark {
position: relative;
display: inline-block;
padding: 8px 15px;
background-color: #f5f5f5;
border-radius: 0 5px 5px 0;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.bookmark::before {
content: "";
position: absolute;
left: -15px;
top: 0;
border-width: 15px 15px 15px 0;
border-style: solid;
border-color: transparent #f5f5f5 transparent transparent;
}彩色书签变体
.color-bookmark {
background-color: #4CAF50;
color: white;
}
.color-bookmark::before {
border-color: transparent #4CAF50 transparent transparent;
}带折角效果
.folded-corner {
position: relative;
background: #ffeb3b;
padding: 15px;
}
.folded-corner::after {
content: "";
position: absolute;
right: 0;
top: 0;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: #fff #ffc107;
}悬停动画效果
.animated-bookmark {
transition: all 0.3s ease;
transform-origin: left center;
}
.animated-bookmark:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}HTML 结构示例
<div class="bookmark">重要笔记</div>
<div class="color-bookmark">待办事项</div>
<div class="folded-corner">参考内容</div>这些 CSS 样式可以单独使用或组合使用，通过调整颜色、尺寸和阴影参数可以创建不同风格的书签效果。对于更复杂的实现，可以考虑结合 SVG 或使用 CSS 渐变来增强视觉效果。
