几乎我的博客中每篇文章中都有大量图片出现，在希望显示给网友的同时又能够很好的被搜索引擎抓取。于是一直都想给图片加一个边框，使图片的边界明显一些。试用过好几种方法都不尽人意，最后在万戈的博客中找到了最好的方法。

CSS代码

通过一下代码，可以实现对图片外框的设置。

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
 
.alignleft {
   float: left;
}
 
.alignright {
   float: right;
}
 
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
 
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
 
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

HTML代码

定义了样式之后，如何在网页中调用呢？通过Firefox 查看了万戈的页面代码，找到如下代码，已实现对图片的定义。

这是对整个图片定义DIV，其中的宽度可以根据自己的版面来调整。

<div class="wp-caption alignnone" style="width: 480px;"></div>

这是对图框内位置定义，用你希望显示的文章代替那几个“X”

<p class="wp-caption-text">XXXXX</p>

示例图片

相关链接

Life Studio

用caption属性给图片加描述边框

WordPress

Codex–CSS–WordPress Generated Classes