html - CSS中的图像框阴影边框样式

Question

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

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

Answer 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;
}

Answer 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; 
    }

Answer 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/

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