Wordpress & CSS：圆角框上方的图像问题答案

【问题标题】：Wordpress & CSS: A trouble of an image which is above the rounded boxWordpress & CSS：圆角框上方的图像问题
【发布时间】：2013-04-20 03:12:00
【问题描述】：

我有一个无法在 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;
}

谢谢！

【问题讨论】：

不确定我是否正确，但您可以将所有样式应用于图像。只需将 JSFiddle 中的第 5 行更改为：#author-avatar-wrap img
@Sven，我测试了它，它可以工作，但它没有显示嵌入阴影。

标签： image wordpress css

【解决方案1】：

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

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

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

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

【讨论】：

2嘿，如果我将符号 . 替换为 #，它将不起作用，因为 .author-avatar-wrap 是主题的原创。它来自 Wordpress。 Wordpress 使用 PHP。但是我可以替换它还是只添加它？
是的，您可以将class="border-styles" 添加到每个元素中以获得完全这种效果。如果你不能这样做，你可以添加这样的代码：jsfiddle.net/wwCg9
我试过了，但它没有显示阴影，我将.author-avatar-wrap替换为div#author-avatar-wrap。在 Wordpress PHP 文件中，作为 loop-single.php。看小部分：
<div class="author-info clearfix"> <div <?php graphene_grid( '< 'author-avatar-wrap', 2, 2, 2, true ); ?>> <?php if ( $author_imgurl = get_the_author_meta( <br/>'graphene_author_imgurl' ) ) { echo '<img class="avatar" src="' . $author_imgurl . '" alt="" />'; } else { echo get_avatar( get_the_author_meta( 'user_email' ), graphene_grid_width( '', 2 ) ); <br/> } ?> </div>
嗯，也许您可以将样式添加到 author-info 上层类，但我不确定这是否适合您。你可以试试这样：jsfiddle.net/Hg9qJ