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

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