Question

我遇到麻烦，我无法在WordPress的博客中解决。我不知道它是不是它们或者它们处于混乱状态。首先，看图像： 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;
}

谢谢！

Answer 1

好的，我们开始：设置图片relative并为此图片应用z-index，该图片低于包装器的z-index。此外，我们必须将CSS3边框样式应用于div和img。

所以，去看看我的小提琴：http://jsfiddle.net/ShwkP/

我还创建了一个名为border-styles的单独类，以防我们有更多具有相同效果的元素。只需将其应用于所有元素即可获得此类边框。

记住这是CSS3并且不能跨浏览器工作，因为border-radius和box-shadow都不受支持！

Wordpress＆amp; CSS：圆形框上方的图像故障

1 个答案: