0

我有一个在 WordPress 博客中无法解决的问题。我不知道这是错误还是它们存在冲突。首先，看图片：http: //i.imgur.com/K4gWjh9.png

请注意此图像中的 3D 圆形边框和白色和黑色阴影。此图像在作者头像图像的框上方。我无法纠正它。见 JSFiddle 的例子：http: //jsfiddle.net/ZUben/

我为 Wordpress 使用石墨烯主题，该主题已更新： 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;
}

谢谢！

4

1 回答 1

0

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

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

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

请记住，这是 CSS3 并且不能跨浏览器工作，因为既不完全支持边框半径也不完全支持框阴影！

于 2013-04-19T19:12:00.473 回答