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

万戈 2009.06.04 发布于：电脑网络, 精品推荐 808 次践踏

为了节省流量和空间，我把图片都外链到Skydrive上了，所以在日志中插入图片经常要用到“从URL添加媒体文件”这一项。奇怪的是，每次在Wordpress编辑器中用了caption属性的图片都可以完好地显示描述边框，但是发布后无论在Firefox还是在IE各版本下的浏览器都没有这个效果了。这么炫的效果没能实现很可惜，但我一直没有去仔细研究原因。

今天路过别家博客的时候无意中发现别人居然能使用这一效果，我心理一下子就不平衡了，决心也要把这描述边框整出来！在这一点上，Firefox给我们带来了无比的便利，我“偷窥”了一下该站的CSS代码和自己的CSS比较了一下，原来我的主题style.css中没有配备caption的样式，难怪不能实现图片的描述边框了，如此简单的道理却困扰了我这么久。

既然已经“偷窥”了，就索性“偷”个彻底，我把他家的style.css中的caption属性都整理出来安在自家的style.css上了。果然，完美地实现了给日志图片加描述边框的效果，在Firefox下还有个微微的圆角，很不错，自己赞一个。之后我又找到在Wordpress的官方网站上也有这段代码的介绍，喜欢这个效果的朋友直接把下面的代码复制到style.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;

}