当前位置：首页 > CSS

css 制作书签

2026-01-16 10:15:32CSS

使用CSS制作书签效果

HTML结构需要一个包含书签文本的容器元素，例如<div>或<a>标签。以下是一个基础结构示例：

<div class="bookmark">热门推荐</div>

基础书签样式

通过CSS添加三角形和背景色，模拟常见书签外观：

css 制作书签

.bookmark {
  position: relative;
  display: inline-block;
  padding: 8px 15px;
  background-color: #ff4757;
  color: white;
  font-weight: bold;
  text-align: center;
}

.bookmark::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 0;
  border-width: 15px 15px 15px 0;
  border-style: solid;
  border-color: transparent #ff4757 transparent transparent;
}

添加悬停效果

增强交互性，鼠标悬停时改变颜色：

.bookmark:hover {
  background-color: #ff6b81;
}

.bookmark:hover::after {
  border-right-color: #ff6b81;
}

带阴影的立体书签

通过CSS阴影和渐变增加立体感：

css 制作书签

.bookmark {
  background: linear-gradient(to bottom, #ff4757, #e84118);
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.bookmark::after {
  border-right-color: #e84118;
}

响应式书签设计

使用视窗单位确保在不同屏幕尺寸下的显示效果：

.bookmark {
  padding: 1vw 2vw;
  font-size: clamp(12px, 2vw, 18px);
}

.bookmark::after {
  border-width: 2vw 2vw 2vw 0;
  right: -2vw;
}

动画书签效果

添加CSS动画让书签更生动：

.bookmark {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}