css那些不常用的写法

CSS3 有许多不太为人所知但非常强大的高级用法，以下是一些值得关注的技巧：

1. CSS 变量 (Custom Properties)：
   CSS 变量允许你定义可重用的值，提升了代码的可维护性和灵活性。

   :root {
        
       --main-color: #3498db;
       --font-size: 16px;
   }
   body {
        
       color: var(--main-color);
       font-size: var(--font-size);
   }
   

2. 多列布局：
   使用 column-count 和 column-gap 属性，可以轻松创建多列文本布局。

   .multi-column {
        
       columns: 3;
       column-gap: 20px;
   }
   

3. clip-path：
   使用 clip-path 属性可以创建复杂的形状，掩盖元素的某些部分。

   .clipped {
        
       clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
   }
   

4. CSS 网格 (Grid)：
   CSS Grid 是一种强大的布局工具，可以用来创造复杂的响应式布局。

   .grid {
        
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }
   

5. 组合选择器：
   利用组合选择器可以更有效地选择元素并应用样式，提升样式的可控性。

   ul li:first-child {
        
       font-weight: bold;
   }
   

6. CSS 动画和关键帧：
   可以定义动画并通过关键帧控制其在特定时间点的状态。

   @keyframes example {
        
       0% {
         background-color: red; }
       100% {
         background-color: yellow; }
   }
   .animated {
        
       animation: example 5s infinite;
   }
   

7. 背景裁剪 (background-clip)：
   允许背景在边框内或文本内仅显示。

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

8. 阴影效果 (box-shadow 和 text-shadow)：
   可以为元素和文本添加阴影，提升视觉效果。

   .box {
        
       box-shadow: 10px 10px 5px #888888;
   }
   .text {
        
       text-shadow: 2px 2px 4px #000000;
   }
   

9. 渐变背景：
   使用 linear-gradient 和 radial-gradient 创建渐变效果。

   .gradient {
        
       background: linear-gradient(to right, red, yellow);
   }
   

通过这些高级用法，CSS3 能够创造出更复杂和吸引人的网页设计，提升用户体验和界面的美观度。