CSS技巧（22个）

1. 自定义字体：通过使用@font-face规则，你可以在网站中应用自定义字体，增加独特性和品牌识别度。选择适合你网站风格的字体，并确保它们能够正确加载和显示。

2. 渐变背景色：使用CSS渐变背景色可以为你的网站添加华丽的外观。尝试不同类型的渐变，如线性渐变、径向渐变或重复渐变。通过指定起始颜色和结束颜色，你可以创建丰富多彩的背景效果。

   .background {
     background: linear-gradient(to right, #ff9900, #ff5500);
   }

3. 动画效果：利用CSS的过渡和动画属性，为你的网站添加动感效果。创建平滑的过渡、淡入淡出效果或引人注目的动画序列。通过定义动画的持续时间、延迟时间和重复次数，你可以控制动画的表现方式。

   .box {
     transition: background-color 0.3s ease-in-out;
   }
   
   .box:hover {
     background-color: #ff5500;
   }

4. 响应式布局：使用CSS媒体查询来创建响应式布局，使你的网站在不同设备上都能呈现出良好的用户体验。根据屏幕尺寸和方向，调整元素的大小、位置和样式。使用弹性盒子（Flexbox）或网格布局（Grid Layout）来实现灵活的自适应设计。

   @media screen and (max-width: 768px) {
     .container {
       flex-direction: column;
     }
     
     .sidebar {
       order: 2;
     }
     
     .main-content {
       order: 1;
     }
   }

5. 平滑滚动效果：通过使用CSS的scroll-behavior属性，你可以为网页添加平滑滚动效果，使页面在滚动时更加流畅和舒适。将其应用于html或body元素，即可启用平滑滚动效果。

   html {
     scroll-behavior: smooth;
   }

6. 网格布局：使用CSS网格布局可以轻松创建复杂的网格结构，实现灵活的页面布局。通过定义网格容器和网格项，你可以精确控制元素的位置和大小。

   .grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 20px;
   }
   
   .grid-item {
     grid-column: span 2;
     grid-row: span 1;
   }

7. 自定义滚动条样式：通过使用CSS的::-webkit-scrollbar伪类选择器，你可以自定义滚动条的样式。调整滚动条的宽度、颜色和形状，以适应你的设计需求。

   ::-webkit-scrollbar {
     width: 10px;
   }
   
   ::-webkit-scrollbar-thumb {
     background-color: #ff5500;
   }
   
   ::-webkit-scrollbar-track {
     background-color: #f1f1f1;
   }

8. 响应式字体大小：使用CSS的vw单位（视窗宽度的百分比）可以创建响应式字体大小。通过设置根元素的字体大小为vw单位，使字体随着屏幕尺寸的变化而自适应。

   html {
     font-size: 4vw;
   }

9. 阴影效果：通过使用CSS的box-shadow属性，你可以添加阴影效果，为元素增添立体感和深度。调整阴影的颜色、模糊程度和偏移量，以实现不同的效果。

   .box {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }

10. 自定义滚动条样式：通过使用CSS的::-webkit-scrollbar伪类选择器，你可以自定义滚动条的样式。调整滚动条的宽度、颜色和形状，以适应你的设计需求。

    /* Webkit浏览器（Chrome等） */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: #888;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }

11. 文本溢出省略号：当文本内容超过容器宽度时，可以使用CSS的text-overflow属性来实现省略号的效果，以便更好地处理长文本。

    .container {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

12. 边框动画效果：通过使用CSS的transition属性和:hover伪类，可以为元素添加边框动画效果，使其在鼠标悬停时产生过渡效果。

    .box {
      border: 1px solid #ccc;
      transition: border-color 0.3s ease-in-out;
    }
    
    .box:hover {
      border-color: #ff5500;
    }

13. 图片模糊效果：通过使用CSS的filter属性中的blur函数，你可以为图片添加模糊效果。调整模糊程度，使图像呈现出柔和的视觉效果。

    .image {
      filter: blur(5px);
    }

14. 渐变背景色：使用CSS的linear-gradient函数，你可以为元素创建渐变背景色。定义起点和终点的颜色值，以及渐变的方向，实现各种炫丽的背景效果。

    .container {
      background: linear-gradient(to right, #ff5500, #ffd200);
    }

15. 文字阴影效果：通过使用CSS的text-shadow属性，你可以为文字添加阴影效果，增加文字的可读性和视觉效果。可以调整阴影的颜色、位置和模糊程度。

    .text {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

16. 渐变边框样式：使用CSS的border-image属性，你可以创建具有渐变效果的边框样式。定义渐变图像或渐变颜色作为边框的源，以及边框的切片方式和宽度。

    .border {
      border: 10px solid;
      border-image: linear-gradient(to right, #ff5500, #ffd200) 1;
    }

17. 旋转动画效果：通过使用CSS的transform属性，你可以为元素创建旋转动画效果。指定旋转角度和过渡时间，在页面中实现各种旋转效果。

    .box {
      transform: rotate(45deg);
      transition: transform 0.3s ease-in-out;
    }
    
    .box:hover {
      transform: rotate(90deg);
    }

18. 渐变文本效果：使用CSS的background-clip属性和渐变背景色，可以为文本创建渐变效果。将渐变应用到文本的背景区域，形成独特的渐变文本效果。

    .text {
      background: linear-gradient(to right, #ff5500, #ffd200);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

19. 透明度动画效果：通过使用CSS的opacity属性和transition属性，你可以为元素创建透明度动画效果。控制元素的透明度，使其在过渡期间平滑淡入或淡出。

    .box {
      opacity: 0;
      transition: opacity 0.3s ease-in-out; 
    } 
    .box:hover { 
      opacity: 1; 
    }

20. 悬浮效果：通过使用CSS的:hover伪类和transform属性，可以为元素创建各种悬浮效果，如放大、旋转、倾斜等。

    .box {
      transition: transform 0.3s ease-in-out;
    }
    
    .box:hover {
      transform: scale(1.2);
    }

21. 渐变阴影效果：使用CSS的box-shadow属性，你可以为元素创建渐变阴影效果。定义阴影的颜色和偏移量，使元素呈现出立体感。

    .box {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.5);
    }

22. 文字动画效果：通过使用CSS的@keyframes规则和animation属性，可以为文字创建动画效果。定义关键帧和动画属性，使文字在页面中产生动态效果。

    .text {
      animation: rainbow 5s infinite;
    }
    
    @keyframes rainbow {
      0% { color: red; }
      20% { color: orange; }
      40% { color: yellow; }
      60% { color: green; }
      80% { color: blue; }
      100% { color: purple; }
    }