切字 CSS

在设计中，有时需要对文字进行一些特殊的处理来优化页面效果。切字（Clipping Text）就是一种比较常见的方式，它可以将文字裁剪为一定形状，在页面上形成不同的效果。

切字 CSS 可以通过 CSS3 提供的 clip-path 属性来实现，该属性用于设置剪裁路径，可以是基本形状，如矩形、圆形，也可以是复杂图形，如多边形、贝塞尔曲线等。下面我们来介绍具体的用法。

基本形状

圆形

.circle {
  clip-path: circle(50% at center);
}

上面的代码将 .circle 元素形成一个半径为 50% 的圆形，剪裁中心为元素中心。

椭圆形

.ellipse {
  clip-path: ellipse(75px 50px at center);
}

上面的代码将 .ellipse 元素形成一个长轴为 75px，短轴为 50px 的椭圆形，剪裁中心为元素中心。

矩形

.rectangle {
  clip-path: inset(10px 20px);
}

上面的代码将 .rectangle 元素形成一个上下 10px，左右 20px 的矩形。

多边形

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

上面的代码将 .polygon 元素形成一个四边形，由四个点构成。

复杂形状

自定义路径

.path {
  clip-path: path("M30,71 C44,87,76,87,90,71 S133,45,119,29 S87,-5,58,29 S16,87,30,71");
}

上面的代码将 .path 元素形成一个由贝塞尔曲线构成的路径。

线性渐变

.linear-gradient {
  clip-path: url(#gradient);
}

<svg>
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="#000" stop-opacity="0" />
      <stop offset="50%" stop-color="#000" stop-opacity="1" />
      <stop offset="100%" stop-color="#000" stop-opacity="0" />
    </linearGradient>
  </defs>
</svg>

上面的代码将 .linear-gradient 元素形成一个由线性渐变构成的路径，线性渐变在 SVG 中定义。

总结

通过上面的介绍，我们可以看到 clip-path 可以实现各种形状的文本裁剪，为设计带来了更多可能。需要说明的是，由于 clip-path 属性目前并不是所有浏览器都支持，所以在使用时需要考虑到兼容性。