css标题制作

使用CSS制作标题的基本方法

通过font-size、font-weight和color属性调整标题样式：

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
}

添加边框和背景效果

为标题添加装饰性边框或背景：

h2 {
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
  background-color: #f8f9fa;
  padding: 10px;
}

创建渐变色标题

使用CSS渐变增强视觉效果：

h3 {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

实现阴影效果

通过text-shadow增加立体感：

h4 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

响应式标题设计

使用媒体查询适配不同设备：

h5 {
  font-size: 1.8rem;
}
@media (max-width: 768px) {
  h5 {
    font-size: 1.4rem;
  }
}

自定义字体导入

通过@font-face使用特殊字体：

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.woff2') format('woff2');
}
h6 {
  font-family: 'CustomFont', sans-serif;
}

动画标题效果

添加悬停或加载动画：

.animated-title {
  transition: transform 0.3s ease;
}
.animated-title:hover {
  transform: scale(1.05);
}

多行标题样式控制

处理长标题的换行和截断：

.long-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}