20 个「拿来就用」的 CSS 小技巧，帮你快速提升页面质感

微芒不朽
680 阅读9分钟

20个实用CSS小技巧

unsetunset1. 使用 :not() 选择器排除特定元素unsetunset

排除最后一个。

/* 排除最后一个子元素 */
li:not(:last-child) {
  color:red;
}

/* 排除具有特定类的元素 */
button:not(.disabled) {
  background-color: #007bff;
}

unsetunset2. CSS变量实现主题切换unsetunset

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #ffffff;
}


[data-theme="dark"] {
  --primary-color: #17a2b8;
  --secondary-color: #adb5bd;
  --background-color: #343a40;
}


.button {
  background-color: var(--primary-color);
  color: var(--background-color);
}

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --background-color: #ffffff;
            --text-color: #212529;
        }

        [data-theme="dark"] {
            --primary-color: #17a2b8;
            --secondary-color: #adb5bd;
            --background-color: #343a40;
            --text-color: #f8f9fa;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: Arial, sans-serif;
            transition: background-color 0.3s, color 0.3s;
            padding: 20px;
        }

        .button {
            background-color: var(--primary-color);
            color: var(--background-color);
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
            transition: background-color 0.3s;
        }

        .button:hover {
            opacity: 0.9;
        }

        .secondary-button {
            background-color: var(--secondary-color);
            color: var(--background-color);
        }

        .theme-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="theme-switcher">
        <button class="button" onclick="toggleTheme()">切换主题</button>
    </div>

    <h1>CSS 变量主题切换示例</h1>
    
    <button class="button">主要按钮</button>
    <button class="button secondary-button">次要按钮</button>

    <script>
        function toggleTheme() {
            const html = document.documentElement;
            const currentTheme = html.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            if (newTheme === 'dark') {
                html.setAttribute('data-theme', 'dark');
            } else {
                html.removeAttribute('data-theme');
            }
        }
    </script>
</body>
</html>

unsetunset3. 使用 clamp() 实现响应式字体大小unsetunset

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}


p {
  font-size: clamp(0.875rem, 2.5vw, 1.125rem);
}

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>clamp() 示例二</title>
  <style>
    /* 标题：在 400px~1200px 之间平滑缩放 */
    h2 {
      font-size: clamp(1.25rem, 1rem + 2vw, 2.5rem);
      line-height: 1.2;
      margin: 0.5em 0;
    }

    /* 正文：在 400px~1200px 之间平滑缩放 */
    .text {
      font-size: clamp(0.875rem, 0.75rem + 1vw, 1.125rem);
      line-height: 1.6;
      max-width: 65ch;
      margin: 0 auto;
    }

    /* 装饰用 */
    body {
      font-family: system-ui, sans-serif;
      padding: 5vw;
      background: #f5f7fa;
      color: #333;
    }
  </style>
</head>
<body>
  <h2>clamp() 让字号“弹性”起来</h2>
  <p class="text">
    把浏览器窗口慢慢拉窄或拉宽，你会发现这段文字的大小像弹簧一样顺滑伸缩：不会在小屏上挤成一团，也不会在大屏上小得可怜。一个属性，三两句代码，就替我们省掉了繁琐的媒体查询。
  </p>
</body>
</html>

unsetunset4. Flexbox居中对齐的终极解决方案unsetunset

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}


/* 或者使用更简洁的方式 */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

unsetunset5. 使用 aspect-ratio 控制元素比例unsetunset

.image-container {
  aspect-ratio: 16 / 9;
  background-color: #f8f9fa;
}


.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

unsetunset6. CSS Grid 网格布局快速创建unsetunset

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}


.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单网格卡片布局</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .card {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        body {
            background-color: #f5f5f5;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .card h3 {
            margin-top: 0;
            color: #333;
        }

        .card p {
            color: #666;
            line-height: 1.5;
        }

        .icon {
            font-size: 24px;
            color: #4285f4;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="card">
            <div class="icon">
                <i class="fa fa-info-circle"></i>
            </div>
            <h3>信息卡片</h3>
            <p>这是一个简单的卡片示例，使用网格布局自动适应不同屏幕尺寸。</p>
        </div>

        <div class="card">
            <div class="icon">
                <i class="fa fa-lightbulb-o"></i>
            </div>
            <h3>想法卡片</h3>
            <p>网格布局会根据容器宽度自动调整列数，保持良好的视觉效果。</p>
        </div>

        <div class="card">
            <div class="icon">
                <i class="fa fa-check-circle"></i>
            </div>
            <h3>任务卡片</h3>
            <p>每个卡片都有阴影和圆角，创造出简洁现代的设计风格。</p>
        </div>

        <div class="card">
            <div class="icon">
                <i class="fa fa-comment"></i>
            </div>
            <h3>评论卡片</h3>
            <p>卡片之间有适当的间距，提升内容的可读性和视觉层次感。</p>
        </div>
    </div>
</body>
</html>

unsetunset7. 使用 backdrop-filter 创建毛玻璃效果unsetunset

.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .glass {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        body {
            margin: 0;
            min-height: 100vh;
            background: url(https://picsum.photos/1920/1080) center/cover fixed;
            display: grid;
            place-items: center;
        }
        .card {
            padding: 2rem;
            border-radius: 1rem;
            color: white;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <div class="glass card">
        <h2>玻璃态效果</h2>
        <p>半透明模糊的现代设计风格</p>
    </div>
</body>
</html>
    

unsetunset8. 隐藏元素的多种方法unsetunset

/* 方法1：display:none（完全移除） */
.hidden {
  display: none;
}


/* 方法2：visibility:hidden（保留空间） */
.invisible {
  visibility: hidden;
}


/* 方法3：opacity:0（透明但保留交互） */
.transparent {
  opacity: 0;
}


/* 方法4：clip-path隐藏 */
.clip-hidden {
  clip-path: inset(100%);
  position: absolute;
}

unsetunset9. 实现文字渐变效果unsetunset

.gradient-text {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .gradient-text {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        body {
            margin: 0;
            padding: 2rem;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        h1 {
            font-size: 3rem;
            margin: 1rem 0;
        }
        p {
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <h1 class="gradient-text">渐变文字标题</h1>
    <p class="gradient-text">这是一段渐变文字示例</p>
    <p>普通文字用于对比</p>
</body>
</html>

unsetunset10. 使用 text-shadow 创造立体文字unsetunset

.stacked-text {
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.3),
    4px 4px 8px rgba(0, 0, 0, 0.2);
  font-weight: bold;
}

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .stacked-text {
            text-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.3),
                4px 4px 8px rgba(0, 0, 0, 0.2);
            font-weight: bold;
        }
        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: #f0f0f0;
            font-family: sans-serif;
        }
        h1 {
            font-size: 4rem;
            color: #333;
        }
        p {
            font-size: 1.5rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="stacked-text">立体文字效果</h1>
        <p class="stacked-text">多层阴影创造深度感</p>
    </div>
</body>
</html>

unsetunset11. 快速创建阴影效果unsetunset

.shadow-card {
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.05);
}


.shadow-hover:hover {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.1);
}

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .shadow-card {
            box-shadow: 
                0 2px 10px rgba(0, 0, 0, 0.1),
                0 4px 20px rgba(0, 0, 0, 0.05);
        }
        
        .shadow-hover:hover {
            box-shadow: 
                0 8px 25px rgba(0, 0, 0, 0.15),
                0 12px 40px rgba(0, 0, 0, 0.1);
        }

        body {
            margin: 0;
            padding: 2rem;
            background: #f8f9fa;
            font-family: sans-serif;
        }

        .card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 1rem;
            transition: box-shadow 0.3s ease;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card shadow-card shadow-hover">
            <h3>卡片 1</h3>
            <p>悬停查看阴影变化效果</p>
        </div>
        <div class="card shadow-card shadow-hover">
            <h3>卡片 2</h3>
            <p>悬停查看阴影变化效果</p>
        </div>
        <div class="card shadow-card shadow-hover">
            <h3>卡片 3</h3>
            <p>悬停查看阴影变化效果</p>
        </div>
    </div>
</body>
</html>
    

unsetunset12. 优雅的过渡动画unsetunset

.transition-element {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}


.transition-element:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

unsetunset13. 使用 :focus-visible 提升可访问性unsetunset

.button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}


.input:focus-visible {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .button:focus-visible {
            outline: 2px solid #007bff;
            outline-offset: 2px;
        }
        
        .input:focus-visible {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

        body {
            padding: 2rem;
            font-family: sans-serif;
        }

        .button {
            padding: 8px 16px;
            border: none;
            background: #eee;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }

        .input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 1rem;
        }

        .container {
            max-width: 400px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>焦点样式示例</h3>
        <p>使用 Tab 键导航或点击元素查看焦点效果</p>
        
        <button class="button">按钮 1</button>
        <button class="button">按钮 2</button>
        
        <input type="text" class="input" placeholder="输入框 1">
        <input type="text" class="input" placeholder="输入框 2" style="margin-left: 10px;">
    </div>
</body>
</html>

unsetunset14. 实现进度条动画unsetunset

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}


.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #00d4ff);
  animation: progress 3s ease-in-out infinite;
  width: 0;
}


@keyframes progress {
  0% { width: 0; }
  50% { width: 70%; }
  100% { width: 100%; }
}

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #00d4ff);
            animation: progress 3s ease-in-out infinite;
            width: 0;
        }
        
        @keyframes progress {
            0% { width: 0; }
            50% { width: 70%; }
            100% { width: 100%; }
        }

        body {
            padding: 2rem;
            font-family: sans-serif;
            max-width: 600px;
            margin: 0 auto;
        }

        .container {
            margin: 1rem 0;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
        }
    </style>
</head>
<body>
    <h3>进度条动画示例</h3>
    
    <div class="container">
        <label>文件上传中...</label>
        <div class="progress-bar">
            <div class="progress-fill"></div>
        </div>
    </div>
    
    <div class="container">
        <label>数据加载中...</label>
        <div class="progress-bar">
            <div class="progress-fill"></div>
        </div>
    </div>
</body>
</html>

unsetunset15. 多列布局实现杂志效果unsetunset

.magazine-layout {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #e9ecef;
}


@media (max-width: 768px) {
  .magazine-layout {
    column-count: 1;
  }
}

unsetunset16. 使用 object-fit 控制图片显示unsetunset

.image-cover {
  object-fit: cover;
  width: 100%;
  height: 200px;
}


.image-contain {
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

unsetunset17. 创建自定义滚动条样式unsetunset

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #007bff #f1f1f1;
}


.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}


.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}


.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 4px;
}

unsetunset18. 实现卡片悬停翻转效果unsetunset

.flip-card {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}


.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}


.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


.flip-card-front {
  background-color: #3498db;
  color: white;
}


.flip-card-back {
  background-color: #2ecc71;
  color: white;
  transform: rotateY(180deg);
}

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .flip-card {
            perspective: 1000px;
            width: 300px;
            height: 200px;
            margin: 2rem auto;
        }
        
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
        
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .flip-card-front {
            background-color: #3498db;
            color: white;
        }
        
        .flip-card-back {
            background-color: #2ecc71;
            color: white;
            transform: rotateY(180deg);
        }

        body {
            font-family: sans-serif;
            text-align: center;
            padding: 2rem;
        }

        h3 {
            margin: 0 0 1rem 0;
        }

        p {
            margin: 0;
            padding: 0 1rem;
        }
    </style>
</head>
<body>
    <h2>3D翻转卡片效果</h2>
    <p>将鼠标悬停在卡片上查看翻转效果</p>
    
    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <h3>正面</h3>
                <p>蓝色背景的正面内容</p>
            </div>
            <div class="flip-card-back">
                <h3>背面</h3>
                <p>绿色背景的背面内容</p>
            </div>
        </div>
    </div>
</body>
</html>

unsetunset19. 使用伪元素创建装饰效果unsetunset

.decorative-element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 49%, #007bff 50%, transparent 51%);
  z-index: -1;
}


.quote::after {
  content: """;
  font-size: 4rem;
  line-height: 1;
  color: #007bff;
  opacity: 0.3;
  position: absolute;
  bottom: -20px;
  right: 20px;
}

unsetunset20. 响应式图片的最佳实践unsetunset

.responsive-image {
  max-width: 100%;
  height: auto;
  display: block;
}


.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
}


.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

总结

  • 这些技巧可以组合使用，创造更丰富的视觉效果
  • 注意浏览器兼容性，特别是新特性如 clamp() 和 aspect-ratio
  • 在实际项目中，建议使用CSS预处理器来更好地组织这些样式
  • 记得测试不同设备上的显示效果，确保响应式设计的完整性
avatar
文章
阅读
粉丝