使用 CSS 创建图片边框

以下是 Volkan Görgülü撰写的客座文章。感谢 Volkan！

本文中使用的图片，**渔夫的孤独**，来自 Daniel Cheong。我在 Smashing Magazine 的一篇文章中发现了这张图片。

通常，当我们在图片周围添加边框时，如下例所示，它们可以让图片看起来更吸引人。它们使图片在页面上的其他内容中脱颖而出。

**无**边框

**有**边框

带有“**双边框**”

就像我在上面的图片中所做的那样，您可以使用 Photoshop、ImageReady 或 Fireworks 等图像编辑应用程序轻松实现这种外观。但是，让我们考虑一个您需要更改网站外观的场景，并且您之前在图片周围使用的边框颜色不适合您的新设计。您需要逐个打开图片并替换该边框。如果您有 3 或 4 张图片，这将花费几分钟，但想想如果有 50 张或更多图片……

您可以使用纯 CSS 非常轻松地实现相同的效果，并且将来只需几秒钟即可更改边框的颜色。

如何操作？

简单的细边框

img { 
   border:1px solid #021a40;
}

“双边框”

img {
   padding:1px;
   border:1px solid #021a40;
}

具有不同内边框颜色的双边框

img {
   padding:1px;
   border:1px solid #021a40;
   background-color:#ff0;
}

此技术的另一个优势

由于我们通常会降低网页图片的质量（优化），因此当您放大带边框的图片时，会注意到边框的颜色会失真。现在，我将使用更浅的蓝色让您清楚地看到失真。左侧图片的边框来自 CSS，右侧图片的边框来自图片本身。

示例页面

既然我们正在讨论图片边框，请查看 CSS3 使用 border-image 属性提供的某些酷炫功能。