使用CSS制作网站边框图像时如何确定最终成品尺寸？

你提到的81x81px参考图本身就是非常适合做CSS边框图像的尺寸，没有特殊需求的话直接用81x81px作为最终成品尺寸即可，可适配绝大多数场景。具体使用规则如下：

直接使用81x81px素材的配置方法 #

这类正方形边框素材默认按九宫格规则拆分使用，你只需要根据自己想要的实际边框显示宽度，匹配对应的CSS属性即可：

• 81是3/9/27的整数倍，选择这几个数值作为边框宽度时，切片不会出现半像素，显示效果最清晰
• 对应设置border-image-slice属性值和border-width属性值一致即可，示例代码如下：

/* 以27px宽边框为例 */
.target-element {
  border: 27px solid transparent;
  border-image: url(你的边框图像本地路径) 27 fill stretch;
  /* 可将stretch替换为round/repeat调整边框中间段的平铺规则 */
}

需自定义边框宽度时的尺寸计算规则 #

如果你需要的边框宽度和上面的数值不匹配，可按以下规则调整最终成品尺寸：

• 保持成品图为正方形（宽高比1:1）
• 最终边长 = 你需要的边框宽度 × 3
• 例如你需要边框宽20px，最终成品就做60×60px即可，刚好拆分出20px宽的九宫格切片，不会出现拉伸变形

内容的提问来源于stack exchange，提问作者Catarina