介绍
CSS 是前端开发必须要掌握的技能之一，对于如何设置图片的边框也是其中之一。在本文中，我们将学习如何使用 CSS 来为图片设置边框。
使用 border 属性设置边框
border 基础
为图片设置边框最简单的方式是使用 CSS 的 border 属性。border 属性可用于设置边框的宽度、样式、以及颜色。
img {
border: 1px solid black;
}
在上面的例子中，我们给图片设置了一个 1px 的实线边框，并且边框的颜色为黑色。以下是 border 属性中所涉及到的属性：
- border-width：设置边框宽度
- border-style：设置边框样式
- border-color：设置边框颜色
你可以单独设置上述任意一个属性，也可以采用缩写形式，如下所示：
img {
border: 1px solid black;
}
在上面的例子中，我们将边框的宽度、样式、以及颜色都放到了一个属性中。
不同的边框样式
border-style 属性可以使用多种样式，如下所示：
img {
border-style: solid;
}
在上面的例子中，我们将边框样式设置为实线。以下是 border-style 可用的样式：
- solid：实线
- dashed：虚线
- dotted：点线
- double：双线
- groove：3D凹边框
- ridge：3D垄状边框
- inset：3D inset 边框
- outset：3D outset 边框
例如，你可以将图片的边框与页眉的区分开来：
img {
border: 1px dashed black;
}
请注意，在上面的例子中，我们将 border-style 设置为 dashed。
使用 outline 属性设置边框
outline 属性是用来设置元素轮廓的。 然而，与 border 属性不同，它不占用实际位置，而是在元素周围创建一些视觉效果。
outline 基础
你可以使用 outline 属性为图片添加一个额外的边框，如下所示：
img {
outline: 1px solid black;
}
在上面的例子中，我们为图片添加了一个 1px 的黑色实线边框。与基于 border 的边框不同，outline 并不会改变元素的大小或位置。作为替代，它会创建一个类似于一个额外的边框的效果，通常是在边框外部或内部，覆盖在我们已有的边框之上（如果有的话）。
outline-offset
还有一种 outline-offset 属性可以使用来为外边框设置内边距，即从描边边缘向内偏移一定的距离。
例如，以下代码可以在描边之外为图片添加一个蓝色的边框，并将它向外面扩展 5px：
img {
outline: 1px solid black;
outline-offset: 5px;
}
在上面的例子中，我们为图片添加了一个 1px 的实线轮廓，然后在该轮廓周围添加了 5px 的额外空白。你也可以将所需的任何样式应用于轮廓，如边框样式、边框圆角等。
总结
在本文中，我们学习了如何使用 CSS 的 border 和 outline 属性来为图片设置边框。你可以选择使用 border 属性，该属性可用于设置边框的宽度、样式，以及边框的颜色。另外，你也可以使用 outline 属性，它不会改变元素的大小或位置，并在元素外部或内部创建了一个类似于额外的边框效果。此外，你还可以使用 outline-offset 属性来设置轮廓内部的内边距。
请注意，两种属性都只能用于被支持的元素上，如 img，table，input 等。同样需要注意的是，在某些浏览器中，对于相同的属性，它们可能会显示不同的效果或结果。