css - 如何像艺术家一样在模板周围创建阴影？

Question

我是 CSS 的新手；昨天（真的）学到了它，从那时起我做了一些模板，我发展得很快，但有一件事我不太明白。如何在不破坏布局或不必处理新问题的情况下在模板的某些部分周围制作阴影。

我创建了一个围绕它的玻璃效果的 CSS/HTML 模板，并且我能够在称为 wrapper 的相对 div 中使用浮动和绝对定位使其工作，但它不适用于 IE7 和 IE6，但适用于所有 FF 版本.

我的问题是：

如何像艺术家一样在模板周围创建阴影？

Answer 1

嗨，我继续进行自我扩展，不确定它是否可以在 IE7 上运行，我有 Windows 7，所以我有 IE8 作为默认值，无法真正测试它。我要说的是，我不知道设置“底部 0”；“左0；” 会让 div 粘在左下角，为此我非常感谢你，这就像一盏灯打开我的大脑，现在我可以做更多的事情，而且还在学习......

<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>

Answer 2

嗨，他们使用桌子 :)

对于我认为你希望它在 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; }