问题与CSS的box-shadow：图像

插图我试图复制CSS“暗角”的效果，detailed on Trent Walton's site。问题与CSS的box-shadow：图像

.vignette1 { 
    box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    float: left; 
} 

.vignette1 img { 
    margin: 0; 
    position: relative; 
    z-index: -1; 

    width: 320px; 
    height: 247px; 
}

它运作良好的隔离，但对我的生产现场，那里的家长背景设置DIV覆盖的z-index图像上的问题 - 生活的jsfiddle demo here。

第二种方法 - 在原来的文章的评论中提到，并列入演示 - 效果很好，但我的形象已经被包裹在标签 - 它不能低于它。

来源

2011-01-24 Jon Hadley

这是最好的形容这里的实际问题。博客随着时间的推移而变化或被取消。如果发生这种情况，问题就变得没有用。 – mikemaccana 2012-06-22 15:15:19

最后，我发现了“覆盖&插图方法”，的Jordon Dobsons's techniques第二是最有效和最依赖于负z索引：

/* Border & Vignette Setup */ 

    figure{ 
     position:    relative; 
     display:    block; 
     line-height:   0; 
     width:     500px; 
     height:     333px; 
     margin-bottom:   2em; 
     border:     1em solid #fff; 
     -webkit-box-shadow:  0 .1em .3em rgba(0,0,0,.25); 
     -moz-box-shadow:  0 .1em .3em rgba(0,0,0,.25); 
    } 

    figure::before{ 
     content:    ""; 
     position:    absolute; 
     top:     -1em; 
     bottom:     -1em; 
     left:     -1em; 
     right:     -1em; 

    } 

    figure::before, 
    figure img{ 
     outline:    1px solid #ccc;  
    } 

    figure.vignette img{ 
     z-index:    1; 
     position:    relative; 
     display:    block; 
     width:     100%; 
     height:     100%; 

    } 

/* Overlay & Inset Method */ 

    figure.overlay.inset::after{ 

    /* Mozilla Settings */ 
     -moz-box-shadow:  inset 0 0 150px rgba(0,0,0,.75);  

    /* Webkit Setting */ 
     -webkit-box-shadow:  inset 0 0 150px rgba(0,0,0,.75); 
    }

（jsFiddle demo使用原来的布局）

来源

2011-02-01 14:04:08