2

次のコードがあります。これは、角が丸く、影のあるボックスを作成します。すべてのブラウザと互換性があるはずですが、実際には互換性がありますが、透明なシャドウが必要であり、IEはRGBA値をサポートしていません:(

<style>
#box {
  width: 250px;
  height: 250px;
  background-color: #1e9ad3;
  padding: 20px;
  margin: 20px;

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  behavior: url(PIE.htc);

  box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
  <div id="box">
    Hello world!
  </div>
</body>

これを行う方法の提案はありますか？私の「ボックス」は、異なる背景、またはテクスチャのある背景にある可能性があるため、たとえばライトグレーなどの影の色を作成できません。

ライブの例は次のとおりです：http：//bbin.own.cz/box.html

4

2 に答える 2

0

CSS3Pieのドキュメントに答えがあります。

PIEは、許可されている場合は常にRGBAカラー値を解析します。ただし、不透明度の値を正常にレンダリングできるのは、いくつかのコンテキストでのみです。他のすべてのコンテキストでは、正しいRGBカラーでレンダリングされますが、完全に不透明になります。不透明度が正しくレンダリングされるサポートされているコンテキストは次のとおりです。

  • -pie-backgroundプロパティで指定された単色のbackground-color。
  • シャドウにブラーがない場合のボックスシャドウのカラー値。

要するに、答えはノーです、これはできません。IEは単にRGBAを適切にサポートしていません。CSS3Pieはいくつかのコンテキストでそれを行うことができますが、ぼかしのあるボックスシャドウは機能しません。

CSS3Pieでそれができない場合は、IEでは不可能であることは間違いありません。

ぼかしをなくすとできるようになりますが、もちろん全体の効果が変わるので、実際には解決策ではありません。

于 2011-07-15T14:33:22.663 に答える
0

IE8より前のカスタムMS設定を使用する必要があります

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

Haventはこれをテストしましたが、詳細についてはグーグルで検索できます。ソース

于 2011-07-15T14:37:00.933 に答える