Wordpress & CSS:圆角框上方的图像的麻烦
Wordpress & CSS:圆角框上方的图像的麻烦
提问于 2013-04-19 09:43:22
我有一个在WordPress的博客上解决不了的麻烦。我不知道是bug还是他们在冲突中。首先，查看下图：http://i.imgur.com/K4gWjh9.png
请注意此图像中的3D圆角边框和白色和黑色阴影。此图像位于作者头像图像框的上方。我不能纠正它。查看JSFiddle的示例：http://jsfiddle.net/ZUben/
我在Wordpress上使用了Graphene主题，这个主题已经更新了：http://www.khairul-syahir.com/wordpress-dev/graphene-theme#.UXCgoivwLRY
遵循我的风格：
.gutter-right {
margin-right: 10px;
}
...
.post-avatar-wrap {
float: right;
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}
...
.author-avatar-wrap {
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}谢谢!
回答 1
Stack Overflow用户
发布于 2013-04-20 03:12:00
好的，我们开始:设置图像relative，并为该图像应用一个比包装器的z-index更低的z-index。此外，我们必须对div和img应用CSS3边框样式。
所以，去看看我的小提琴叉子吧：http://jsfiddle.net/ShwkP/
我还创建了一个名为border-styles的单独类，以防我们有更多具有相同效果的元素。只需将其应用于所有元素，即可获得此类边界。
请记住，这是CSS3，不能跨浏览器工作，因为border-radius和box-shadow都不完全支持！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16095909
复制相关文章
相似问题
腾讯云开发者
