html - CSS での画像ボックスの影の境界線のスタイリング

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/

私のコードがずさんであったりごちゃごちゃしていたり​​しても許してください。