css3小标题制作

CSS3 小标题制作方法

使用 text-shadow 和 border 属性创建立体效果的小标题。通过调整阴影颜色和边框样式，可以增强标题的视觉层次感。

h3 {
    font-size: 24px;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid #007BFF;
    padding-bottom: 5px;
}

渐变背景小标题

利用 CSS3 的 linear-gradient 实现渐变背景效果，搭配文字颜色和阴影提升可读性。

h3 {
    font-size: 22px;
    color: white;
    padding: 10px 15px;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

图标结合小标题

通过伪元素 ::before 或 ::after 添加图标，使用 Font Awesome 或 Unicode 字符增强标题的视觉效果。

h3::before {
    content: "\2022";
    color: #FF5722;
    margin-right: 10px;
    font-size: 20px;
}
h3 {
    font-size: 20px;
    color: #444;
}

动画悬停效果

为小标题添加悬停动画，例如颜色变化或轻微放大，提升交互体验。

h3 {
    font-size: 22px;
    color: #333;
    transition: all 0.3s ease;
}
h3:hover {
    color: #007BFF;
    transform: scale(1.02);
}

响应式小标题设计

使用媒体查询确保小标题在不同设备上显示合适的大小和间距。

h3 {
    font-size: 20px;
    margin-bottom: 15px;
}
@media (max-width: 768px) {
    h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
}

自定义字体和字母间距

通过 @font-face 引入自定义字体，并调整 letter-spacing 提升标题的设计感。

@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2');
}
h3 {
    font-family: 'CustomFont', sans-serif;
    letter-spacing: 1px;
    color: #2c3e50;
}

边框和圆角结合

为小标题添加圆角边框和内部填充，使其在页面中更加突出。

h3 {
    font-size: 21px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 8px 12px;
    color: #495057;
}