2

Web ページで box-shadow と border-radius を一緒に使用しようとしていますが、半径があるスペースを埋める白い画像が表示されています。ドロップ シャドウを使用して Photoshop で「透明な」画像を jpg または png-8 ファイルに保存するときのように考えてください。

これが私が何を意味するかを示すための画像です。

(まだ画像を投稿できませんが、ここにリンクがあります) http://i.imgur.com/jDpIH.png

これをCSSとして使用しています

.whole
{
width: 1000px;
margin: 0 auto;
-webkit-box-shadow: 0px 3px 5px 2px #000000;
-mox-box-shadow: 0px 3px 5px 2px #000000;
box-shadow: 0px 3px 5px 2px #000000; 
}


.top
{
height: 120px;
background-color: #1F1209;
margin-top: 50px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.footer
{
height: 250px;
background-color: #834C24;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

それで、私がこれを修正できる方法があるかどうか誰かが知っていますか? ちなみに、これは Firefox と IE で発生しています。ただし、他のブラウザでは確認できませんでした。

Photoshopped 画像を使用しないことを本当に望んでいます... CSS3 は必ず使用する必要があるためです。

これについて何か考えはありますか？どんな助けでも大歓迎です！:)

お時間をいただきありがとうございます。

4

3 に答える 3

1

あなたのためのちょっとしたヒント

-left -right- topを追加する代わりに、このcss3をショートカットに使用します

border-radius:0px 0px 0px 0px;

<!-- [top left] [top right] [bottom right] [bottom left] -->

そうすればそれは簡単でしょう。

そして、ボックスシャドウについては...なぜそうなのかわかりませんが、このコードを使用したところ、完全に機能します。

box-shadow:0px 0px 10px black;

<!-- in case you don't know ...  [x coordinate] [y coordinate] [size of shadow] [color] -->

ええと、私はIEブラウザを使用しておらず、コンピュータが突然少しハングするので、これらのコードがIEで機能するかどうかはわかりませんが...とにかく。

私はあなたのクラスのcssコードの1つを書き直し、それが機能することを願っています。

.footer
{
    height: 250px;
    background-color: #834C24;
    border-radius:10px 10px 10px 10px;
    box-shadow:0px 0px 50px black;
}

そして、-webkit-と-moz-を入れなくても、MozillaとChromeはそれを読むと思います。IEでも動作することを願っています。

とにかく...それだけです。それがうまくいくことを願っています。

于 2012-05-17T13:44:11.910 に答える
1

コンテナに関連付けられた背景色がある可能性があります。

于 2012-05-17T13:59:26.437 に答える
0

border-radius プロパティは、CSS3 プロパティであるため、IE9 以降、Firefox 4 以降、Chrome、Safari 5 以降、Opera でサポートされています。構文は次のとおりです。

border-radius: 1-4 length|% / 1-4 length|%;

例 1

border-radius:2em;

次と同等です。

border-top-left-radius:2em;
 border-top-right-radius:2em;
 border-bottom-right-radius:2em;
 border-bottom-left-radius:2em;

例 2

border-radius: 2em 1em 4em / 0.5em 3em;

次と同等です。

border-top-left-radius: 2em 0.5em;
 border-top-right-radius: 1em 3em;
 border-bottom-right-radius: 4em 0.5em;
 border-bottom-left-radius: 1em 3em;
于 2012-05-17T13:51:41.203 に答える