html中加图片边框的,用HTML代码给图片添加边框方法

用HTML代码给图片加边框有三种方法。

一是通过给图片style属性赋值加边框。

二是将图片作为表格的背景图加边框。

三是将图片放入表格单元中加边框。

下面就分别介绍这三种方法及其代码。

一、通过给图片style属性赋值加边框

(一)代码格式代码格式

代码说明BORDER-TOP、BORDER-BOTTOM、BORDER-LEFT、BORDER-RIGHT分别表示上、下、左、右边框，其属性值#007979、5px、solid分别表示该边框的颜色、宽度及边框类型(solid为实线边框)，可根据需要而改变。

(二)要点说明

1、用此代码所加的边框位于图片的外侧，边框不遮挡图片边缘。

2、改变图片宽度和高度可以改变图片的大小、形状和比例，但原图始终都能完整显示。具体效果如下图所示。改变宽度和高度值对图片显示效果的影响

原始图片(尺寸：宽200×高263)等比减小宽高效果(尺寸：宽100×高131)

只减小宽度效果(尺寸：宽150×高263)只减小高度效果(尺寸：宽200×高200)

只增加宽度效果(尺寸：宽280×高263)只增加高度效果(尺寸：宽200×高320)

二、将图片作为表格的背景图加边框

(一)代码格式代码格式

代码说明BORDER-TOP、BORDER-BOTTOM、BORDER-LEFT、BORDER-RIGHT分别表示上、下、左、右边框，其属性值#007979、5px、solid分别表示该边框的颜色、宽度及边框类型(solid为实线边框)，可根据需要而改变。

(二)要点说明

1、图片的边框即为表格的边框。用此方法所加的边框时，若按原始图片尺寸设置表格宽度和高度，则所加的边框将位于图片的内侧，边框将遮挡图片边缘部分，边框越宽，被遮挡部分越多。因此，要想显示完整的原始图片，设置表格宽度和高度时应加上边框的宽度值。

2、改变表格宽度和高度不改变原图片的大小、形状和比例，但显示出的图片将会发生变化。减小宽度或高度，显示出的是原始图片的部分区域(自右向左、自下向上减小显示范围)；加大宽度或高度，多出的区域将由原始图片平铺填补。具体效果如下图所示。改变宽度和高度值对图片显示效果的影响

完整图片效果(尺寸：宽210×高273)等比减小宽高效果(尺寸：宽150×高197)

等比增大宽高效果(尺寸：宽250×高329)只增加高度效果(尺寸：宽200×高329)

只增加宽度效果(尺寸：宽280×高263)只减小高度效果(尺寸：宽200×高200)

三、将图片放入表格单元中加边框

(一)代码格式代码格式

代码说明BORDER-TOP、BORDER-BOTTOM、BORDER-LEFT、BORDER-RIGHT分别表示上、下、左、右边框，其属性值#007979、5px、solid分别表示该边框的颜色、宽度及边框类型(solid为实线边框)，可根据需要而改变；cellspacing为单元格与表格各边框的距离；bgColor为背景色(可视情改变)。

(二)要点说明

1、这里图片的边框也是表格的边框。用此方法所加的边框位于图片的外侧，边框不遮挡图片边缘，且cellspacing的值设置得适当将使效果更美观。

2、改变图片宽度和高度可以改变图片的大小、形状和比例，但原图始终都能完整显示。改变宽度和高度值对图片显示效果的影响

原始图片尺寸效果(尺寸：宽200×高263)等比减小宽高效果(尺寸：宽100×高131)

只减小宽度效果(尺寸：宽150×高263)只减小高度效果(尺寸：宽200×高200)

只增加宽度效果(尺寸：宽270×高263)只增加高度效果(尺寸：宽200×高320)