4

画像と CSS 疑似要素を使用して、ボックス シャドウとグラデーション ボーダーを追加しようとしています。

私はそのコードを試しました：

.box:before {
    content: url('box-shadow.png');
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    z-index: -1;
    bottom: -9px;
    line-height: 0;
}
.box:after {
    content: url('box-border.png');
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    bottom: -5px;
    right: 0px;
}

ただし、親 div のサイズが変更されても、追加された画像のサイズは変更されませんが、画像を手動で追加することで機能します。

そのフィドルを参照してくださいhttp://jsfiddle.net/5TG3E/2/

4

1 に答える 1

8

私はあなたを助けるかもしれない私の側から試してみてください。次のように書きます。

.box:after {
    content:'';
    position: absolute;
    z-index: -1;
    bottom: -9px;
    margin: 0 auto;
    top:0;
    left:0;
    right:0;
    background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
    -moz-background-size:100% 9px;
    background-size:100% 9px;
}
.box:before {
    content:'';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left:0;
    top:0;
    background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}

これをチェックしてくださいhttp://jsfiddle.net/5TG3E/6/

于 2012-05-03T04:59:06.013 に答える