wordpress用caption属性给图片说明加边框
每次在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;
}
