0

ここに画像の説明を入力

これは私のウェブサイトのスケッチの上部です。これは HTML エディターで作成したものです。

画像に見える円は私のロゴで、背景がアルファ色の画像です。
影や枠などはIEでも問題なく動いています。

今、HTML5 と CSS3 で似たようなことをしようとしていますが、画像の影と境界線に多くの問題があります。

正方形の画像なので、box-shadow は機能しません (アルファ色の背景を持つ画像であることを思い出してください)
。理論上はすべてのブラウザで動作するはずですが、Chrome でしか動作しません。

一方、写真のような境界線は取得できません。あなたが知っているように、

誰か助けてくれませんか。私はそれをお願い申し上げます。ありがとう

Lloan Alas から提供されたソリューションを使用した後、完全に機能していますが、携帯電話では機能していません。
私はイルカ ブラウザを使用しています。
携帯電話

これが私のコード
です。高さ: 188px; 幅: 300px; 背景画像: url("../imagenes/logo.png"); 境界線: 5px の純白。境界半径: 50% ; ボックスの影: 0 10px 15px #000; -moz-box-shadow: 0 10px 15px #000; -webkit-box-shadow: 0 10px 15px #000; -ms-box-shadow: 0 10px 15px #000; -o-box-shadow: 0 10px 15px #000; -khtml-box-shadow: 0 10px 15px #000;

html: <div id =
"ロゴ"></div>

4

2 に答える 2

1

何を探しているのかよくわかりませんが、その楕円に影を追加したい場合はbox-shadow、ご存知
のように、必要なものは次のとおりです。使用法は次のとおりです。

box-shadow: horizontal-shadow-position v-shadow-pos blur spread color inset;

プロパティを省略できますが、その順序を変更することはできません。

たとえば、あなたの影は次のようになります

box-shadow: 3px 3px 8px 2px #666;

埋め込まれていないからです。

さらに、より多くのブラウザーで使用できるようにするには、次のようなブラウザーの接頭辞が必要になります。

box-shadow:         3px 3px 8px 2px #666; /*Firefox (and new versions of Opera)*/
-o-box-shadow:      3px 3px 8px 2px #666; /*Opera*/
-ms-box-shadow:     3px 3px 8px 2px #666; /*Internet Explorer*/
-webkit-box-shadow: 3px 3px 8px 2px #666; /*Webkit: Safari, Chrome, Chromium...*/

また、あなたが言及したのは、 Firefox、Chrome、Operaなどのプロパティとalpha-filter同等であることを覚えておいてください...opacity

于 2013-06-23T11:46:26.953 に答える