css3小标题制作

CSS3小标题制作方法

使用伪元素和边框 通过伪元素和边框可以创建带有装饰效果的小标题。例如：

.subtitle {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  font-size: 18px;
  color: #333;
}
.subtitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #ff6b6b;
}

渐变背景标题 使用CSS3渐变可以制作色彩丰富的标题背景：

.gradient-title {
  display: inline-block;
  padding: 8px 15px;
  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
  color: white;
  border-radius: 4px;
  font-weight: bold;
}

文字阴影效果 为标题添加阴影增强立体感：

.shadow-title {
  font-size: 20px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  color: #444;
  letter-spacing: 1px;
}

旋转倾斜标题 使用transform属性创建倾斜效果：

.skew-title {
  display: inline-block;
  transform: skewX(-15deg);
  background-color: #3498db;
  color: white;
  padding: 5px 15px;
  font-weight: bold;
}

边框动画标题 添加悬停动画效果：

.animate-title {
  display: inline-block;
  padding: 10px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.animate-title:hover {
  border-color: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

这些方法可以根据实际需求组合使用，通过调整颜色、尺寸和动画参数来创建各种视觉效果。