Question

我想在这个页面上实现类似于蒂姆库克图像周围的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/

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

图像框阴影边框样式在CSS中

3 个答案: