用CSS给wordpress图片添加立体边框

WordPress技术 January 02 2011 CSS WordPress


看到我博客的童鞋会发现我博客的图片会有一个阴影边框~这不是在上传前添加的效果,而是css实现的。

怎么做?看下去就知道了~~~~

先在你博客主题的CSS中找到img和a img的样式,没有就自己建立,然后使用一下代码:

img 
{
	padding:10px;
	border:1px solid #000;
	-moz-box-shadow:3px 3px 4px #000;
	-webkit-box-shadow:3px 3px 4px #000;
	box-shadow:3px 3px 4px #000;
	background:#fff;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
}
a img
{
	padding:10px;
	border:1px solid #000;
	-moz-box-shadow:3px 3px 4px #000;
	-webkit-box-shadow:3px 3px 4px #000;
	box-shadow:3px 3px 4px #000;
	background:#fff;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
}

这样就可以了,最后在你觉得没有必要边距那么大的地方应用以下样式,如:

.attachment-post-thumbnail
{
	margin:2px;
	padding:0;
	border:0;
}
.avatar
{
	margin:0;
	padding:0;
	border:0;
}

大功告成~~~

原文链接:https://blog.yourtion.com/wordpress-image-border.html


欢迎来到郭宇翔的博客

打酱油专业户,喜欢各种折腾!

Follow @yourtion on GitHub

推荐内容