介绍
在网页设计中，经常需要对图片进行美化处理以达到更好的视觉效果。而给图片添加边框效果是其中一个比较常见的需求之一。通过HTML的语法和CSS样式，很容易就可以完成这个任务。
使用CSS的border属性添加边框效果
在HTML代码中，我们使用标签来插入图片。要添加边框，只需要在CSS样式中应用border属性即可。
语法
img {
border: [border-width] [border-style] [border-color];
}
解释
border属性包括3个子属性：border-width、border-style和border-color，分别表示边框的宽度、样式和颜色。其中，border-width和border-color是必需的，而border-style是可选的。如果不设置border-style，则默认为实线（solid）。
举个例子，以下CSS代码会创建一个宽度为1像素、实线样式、红色边框的样式表：
img {
border: 1px solid red;
}
这个边框的宽度为1像素，样式是实线，颜色为红色。你可以根据需要进行更改。
使用CSS的outline属性添加边框效果
除了上述border属性外，CSS还提供了outline属性来添加边框效果。不同的是，outline不占据空间，而是在图片周围虚拟出一个边框。因此，如果你想让边框不影响图片布局，可以使用outline属性。
语法
img {
outline: [outline-width] [outline-style] [outline-color];
}
解释
outline属性和border属性类似，也包括3个子属性：outline-width、outline-style和outline-color。其中，outline-width和outline-color是必需的，而outline-style是可选的。
举个例子，以下CSS代码会创建一个宽度为3像素、双线样式、蓝色边框的样式表：
img {
outline: 3px double blue;
}
使用CSS3的box-shadow属性添加边框效果
除了上述两种方法外，CSS3还提供了box-shadow属性，能够创建复杂的边框效果。
语法
img {
box-shadow: [h-shadow] [v-shadow] [blur] [spread] [color] [inset];
}
解释
box-shadow属性包括6个子属性：h-shadow、v-shadow、blur、spread、color和inset，分别表示水平阴影位置、垂直阴影位置、模糊距离、扩张距离、阴影颜色和阴影是否内陷。其中，h-shadow和v-shadow是必需的，而其他子属性是可选的。
以下是一个简单的CSS3 box-shadow样式：
img {
box-shadow: 0 0 10px #000000;
}
这个样式会在图片周围产生一个黑色的阴影，模糊半径为10像素。你可以通过调整这个样式的子属性来创建不同的边框效果。
总结
本文介绍了使用HTML和CSS样式给图片添加边框效果的三种方法：使用CSS的border属性、使用CSS的outline属性以及使用CSS3的box-shadow属性。这些方法各有优缺点，你可以根据需要选择适合自己的方法。