0

境界線を別の境界線に巻き付けて、両方に挿入ドロップシャドウを使用させるにはどうすればよいですか (額縁の二重マットのように)。

4

3 に答える 3

1

http://jsfiddle.net/nG4Td/2/に示すように、div をネストできます。

<div class="border">
  <div class="border2">
    <p>hello world</p>
  </div>
</div>

CSS

.border{
  border: 5px inset black;
  background:#ccc;
  width:200px;
  height:200px;
  padding:20px;    
}
.border2{
  border: 5px inset black;
  background:#eee;
  width:150px;
  height:150px;
  padding:20px;    
 }`
于 2012-06-05T19:59:43.030 に答える
1

:beforeこれは、および:after疑似要素を使用して実現できます。回答の最後にある jsFiddle デモを参照してください。

HTML

<div class="frame"><img src="../img/logo.png"></div>

CSS

.frame {
    display:inline-block;
    position:relative;
    margin:20px;
    z-index:5;
    padding:10px;
    background:#376b90;
}
.frame:before {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:0;
    top:0;
    right:0;
    bottom:0;
    box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:5px;
    top:5px;
    right:5px;
    bottom:5px;
    box-shadow:inset 0 0 3px 2px black;
}

使用例

于 2012-06-05T20:09:18.430 に答える
1

これが私のフィドルのトピックです

オプション1）

疑似クラスを使用してこれを実現できます

HTML

<span class="doubleMatt">
    <img src="http://lorempixel.com/400/200/" />
</span>

CSS

span,img{padding:0;margin:0;border:0;}
.doubleMatt{
    position:relative;
    display:inline-block;
    font-size:0;
    line-height:0;
}

.doubleMatt:after{
    position:absolute;
    top:1px;
    left:1px;
    bottom:1px;
    right:1px;
    border:4px solid rgba(255,255,255,0.5);
    outline:1px solid rgba(0,0,0,0.2);
    content:" ";
}​

オプション 2)

いくつかの基本的な (1 次元の) 長所を使用できます

CSS

.basicMatt {
    background:#222;
    padding:3px;
    border:3px solid #666;
}

HTML

<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />

オプション 3)

アウトラインを使用できます

CSS

.outlinedMatt{
    background:#fff;
    padding:8px;
    border:3px solid #222;
    outline:3px solid #666;
    margin:3px;
}

HTML

<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />
于 2012-06-05T19:54:51.570 に答える