如何在 CSS 中用图像制作圆角

在 CSS 中，我们可以通过 border-radius 属性来制作圆角效果。但是，如果我们想要更加细致地控制圆角的形状，同时又不想增加 HTML 结构，那么可以使用图像制作圆角。

制作圆角图像

首先，我们需要制作一张包含圆角的 PNG 图像。可以使用 Photoshop 等工具来制作这张图像。

例如，我们制作一张宽度为 200 像素、高度为 100 像素，左上角和右下角为圆角半径为 20 像素的图像。制作完成后，保存为 rounded.png。

使用圆角图像

接下来，在 CSS 中使用 border-image 属性来引入圆角图像：

div {
  width: 200px;
  height: 100px;
  border: 20px solid transparent;
  border-image: url('rounded.png') 20 repeat;
}

通过 border 属性，我们制作了一个宽度为 160 像素、高度为 60 像素的空心矩形，并设置了一个透明的边框。然后在 border-image 属性中，引入了 rounded.png 图像，并设置了边框的宽度为 20 像素、重复方式为 repeat。

这样，就可以在矩形的四个角落显示出圆角的效果了。

进一步控制圆角形状

如果我们想要控制圆角的形状，可以在圆角图像中指定圆弧的位置和大小。

例如，我们想要制作一个左上角为圆角半径为 20 像素的矩形，可以制作一张宽度为 40 像素、高度为 40 像素的图像。然后在 Photoshop 中，选择圆形选框工具，设置半径为 20 像素，将选框放置在图像的左上角，并删除选框外的区域。最后保存为 rounded-2.png。

然后在 CSS 中使用以下代码来引入圆角图像：

div {
  width: 200px;
  height: 100px;
  border-image: url('rounded-2.png') 20 20 0 0 repeat;
}

通过 border-image 属性的后三个参数，分别指定了左上角、右上角、右下角和左下角的圆角半径大小。

这样，就可以制作任意形状的圆角效果了。

总结

通过图像制作圆角，可以更加灵活地控制圆角的形状，并且不需要增加 HTML 结构，减少了代码的冗余。当然，这种方法也存在一定的局限性，并且需要制作圆角图像，但是对于一些特殊需求，还是很有用的。