0

私はCSSのことは初めてです。昨日（本当に）それを学び、それ以来いくつかのテンプレートを作成しました。私は非常に速く進化していますが、完全に取得できないことが1つあります。レイアウトを破壊したり、新しい問題に対処したりすることなく、テンプレートの一部の周りにドロップ シャドウを作成するにはどうすればよいでしょうか。

周囲にガラス効果のある CSS/HTML テンプレートを作成しました。フロートとラッパーと呼ばれる相対 div 内の絶対配置を使用して機能させることができましたが、IE7 と IE6 では機能しませんが、すべての FF バージョンで機能します。 .

私の質問は：

artisteer のように、テンプレートの周りにドロップ シャドウを作成するにはどうすればよいですか?

4

2 に答える 2

0

こんにちは、彼らはテーブルを使用します:)

IEで動作させたいと思う方法についてはheight、外側のボックスを次のように定義する必要があります。

<div id="box">
  <div class="corner tl"><!-- --></div>
  <div class="corner tr"><!-- --></div>
  <div class="corner bl"><!-- --></div>
  <div class="corner br"><!-- --></div>
</div>

#box {
  height: 100px;
  position: relative;
  width: 100px;
}
  .corner {
    background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
  }
  .tl { top: 0; left: 0; background-position: 0 0; }
  .tr { top: 0; right: 0; background-position: -22px 0; }
  .bl { bottom: 0; left: 0; background-position: 0 -22px; }
  .br { bottom: 0; right: 0; background-position: -22px -22px; }
于 2009-12-02T09:16:39.333 に答える
0

Hi I gone ahead and made that self expandable, not sure it's gonna work on IE7 tho, I have windows 7 so I have IE8 as default and can't really test it. All i have to say is that I had no idea that setting "bottom 0;" "left 0;" would make the div stick to the bottom left and for that I can't thank you enough it's like a lamp just turn on on my brain and now I can do so much more, well still learning...

<style type="text/css">
#box {

  position: relative;
  width: 100px;
}
  .corner {
    background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
  }
  .tl { top: 0; left: 0; background-position: 0 0; }
  .tr { top: 0; right: 0; background-position: -22px 0; }
  .bl { bottom: 0; left: 0; background-position: 0 -22px; }
  .br { bottom: 0; right: 0; background-position: -22px -22px; }

  .content {padding:10px;}

</style>

<div id="box">
  <div class="corner tl"><!-- --></div>
  <div class="corner tr"><!-- --></div>
  <div class="corner bl"><!-- --></div>
  <div class="corner br"><!-- --></div>
  <div class="content">the name of jeremiah is jorge gonzaga I have no Idea where this came from!</div>
</div>
于 2009-12-02T14:34:18.060 に答える