不为人知的CSS技巧（二）：提升前端效果的4个隐藏宝藏

---

1. CSS Grid的自动填充功能 (grid-auto-flow)：

• 介绍：grid-auto-flow 控制CSS Grid布局的自动流动行为，特别适合响应式设计。
• 示例代码：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
  .grid-item {
    background: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
  }
  

---

2. clamp()函数：

• 介绍：clamp()函数用于动态设置元素的大小，它能根据视口大小限制范围，解决响应式布局中元素大小不合适的问题。
• 示例代码：

  .text {
    font-size: clamp(16px, 5vw, 24px);
  }
  

---

3. :has()伪类选择器：

• 介绍：has()伪类选择器允许你根据某个元素的子元素或后代元素的状态来选择父元素，适用于复杂的条件样式设置。
• 示例代码：

  .container:has(.active) {
    background-color: yellow;
  }
  

---

4. mask-image与clip-path结合：

• 介绍：通过mask-image和clip-path，可以创造更加复杂的图形效果或裁剪效果，适用于图形或图标设计。
• 示例代码：

  .image-container {
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    width: 300px;
    height: 300px;
    background-image: url('image.jpg');
  }
  

---