CSS中的图像框阴影边框样式答案

【问题标题】：Image box shadow border styling in CSSCSS中的图像框阴影边框样式
【发布时间】：2013-05-29 12:28:53
【问题描述】：

我想实现一个类似于在此页面上看到的 Tim Cook 图片周围的 CSS 边框：http://www.macstories.net/news/tim-cook-at-d11/ — 但是，我只希望在我自己的网站上的正文中的图片周围有边框，而不是，例如，我网站侧边栏中的图片。

我需要什么代码来实现酷边框，我如何才能只定位正文中的图像？

【问题讨论】：

1) - 样式就在源代码中（Chrome、Safari、Firebug 等中的“检查元素”）2) - 使用 CSS 选择器仅定位您想要的元素。

标签： html css border

【解决方案1】：

如果您的“正文”在分类为“主要”的 div 中，您可以像这样定位该部分中的图像：

.main img {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    margin: 30px 0;
    padding: 10px;
    background: #FFF;
    border: 1px solid #CCC;
    position: relative;
    display: block;
}

【讨论】：

【解决方案2】：

img{
    -webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    padding:10px;
    background:#fff;
    border:1px solid #ccc;
    width:auto;
    height:auto; 
    }

【讨论】：

【解决方案3】：

嗯，我认为这只是一个通用的阴影效果。

HTML：

 <div id="example" class="outerglow">Full Shadow</div>

CSS：

    #example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}


    .outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}

这里是 jsfiddle 看看.. http://jsfiddle.net/KMtc6/

如果我的代码草率或混乱，请原谅我。

【讨论】：