0

CSSに関しては初心者です。いつでもPHPスクリプトをください！助けが必要です。インターネットを調べたところ、画像にドロップ シャドウを追加するための明確な解決策が見つかりました。ただし、機能していません。CSS のどこかに競合があると思います。私のjcfiddlerを見て、正しい方向に向けてください?? これは私の望む効果です... ここに画像の説明を入力

JCFiddler/z83Md/1/

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: #D4E6F4;
    font-size: 13px;
    line-height: 15px;
}
body:before {
    /* top shadow */
    content:"";
    position: fixed;
    top: -20px;
    left: -10px;
    width: 110%;
    height: 20px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    z-index: 100;
}
.image {
    background: #ddd;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: rgba(0, 0, 0, .8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
}
.image:before, .image:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.image:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}
4

1 に答える 1

1

:beforeおよび:after疑似セレクターにシャドウを追加する理由は何ですか? コードを次の場所に移動した場合:

.image {
    background: #ddd;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: rgba(0, 0, 0, .8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 1);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 1);
    box-shadow:0 15px 10px rgba(0, 0, 0, 1);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.image:before, .image:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
}

望ましい効果が得られ始めます。ここにデモがあります

于 2013-03-28T03:20:46.787 に答える