上次介绍了给照片加个透明的边框，这里再继续介绍用源代码给照片加个实体的边框。如果颜色、线形配合得好，也能使照片增色不少。而且操作简单，所用的代码有普遍性。下面用一个例子来做说明。请看下图，这金属色的边框就是用代码做的：

下面是这幅照片的代码：

<img style="border:ridge 10px #ffff88"
align="center" width="400" alt=""
src="http://www.oldkids.cn/uploads/diary/200804/01084946152.jpg">

很多网友用过这个《img》标签，并对img元素有所了解，还会调整所贴照片的显示尺寸。因此对它的属性只作简单介绍。

常用的属性是：

对网友不太注意的宽度和高度的设置，作点说明。上面特别指出的是“显示”尺寸，不是照片的实际尺寸。显示尺寸可与实际尺寸不同，常常是上传的照片尺寸大，而由于博客里的空间限制，要减小显示的尺寸。这要求按比例地计算出显示的宽度和高度。如果不按比例，将使所显示的照片变形，或拉长或压扁。但要精确计算是很麻烦的。有个偷懒的方法，就将这一对“宽与高”只定义一个，另一个在代码里不要出现，这样电脑会自动的对另一个作出精确的计算，然后显示。上面的例子是只设置宽度，将高度交给电脑去算。

在上面的代码里除上述常见的代码外，多了下面的一段代码，这就是边框的标记：

用中文来解释它的语法就是：

样式=“边框：风格  宽度  颜色”

这是通用的CSS边框标记的简写法。有三个参数：

风格（style） 宽度（width） 颜色（color）

中间用空格隔开。宽度常用像素表示。颜色常用16进制数表示，也可用关键字标记。边框的风格有八种可选，要用“关键词”表示。下面的附图是八种样式的效果及对应的关键词。最常用的是solid（平），brige（脊）、double(双线)。要注意，风格是必须定义的,否则只定义其他两个参数是没有意义的。

在老小孩网上使用也很方便，在源代码里找到显示照片的img标签，或照片的地址，在img的后面加上：“Style...”的代码，再替换自己所需要的三个参数即可。利用IE提供的“查找”功能，可方便的找到img标签。

说明：

1. 用CSS标记来定义边框，与用HTML的border属性是有区别的。两者不能同时使用，CSS标记的优先级高。

2. 用上述的CSS标记法，对所有的有实体盒子的标签都适用（如table、td、div等） ，但只是标记该“盒子”的外边框。本文的标题，下面的表，都用了CSS边框标记。

3. 边框的CSS详细标记可单独对左右、上下四条边的三个参数分别作出标记。共有12个组合。因此标记就有12条，每条用“;”号隔开。如只用border-bottom-style:double来单独标记下边框的风格为双线（如本文标题下面的双线)。

4. 对inset及outset两个风格，不宜自己定义颜色参数。下面的附图的标记法是：style="border:inset"。它是灰色的，其他颜色反而 凹凸效果不明显。