Question

我是CSS的新手;昨天（真的）学到了它，从那以后我做了一些模板，我的进展非常快，但有一件事我不太理解。如何在不破坏布局或处理新问题的情况下在模板的各个部分周围形成阴影。

我已经创建了一个带有玻璃效果的CSS / HTML模板，我能够使用浮点数和绝对定位在一个名为包装器的相对div中工作，但它不适用于IE7和IE6但是可以工作所有FF版本。

我的问题是：

如何像artisteer一样在模板周围创建一个阴影？

Answer 1

hihi他们使用表格:)）

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

Answer 2

嗨我继续前进并使自我扩展，不确定它将在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>

如何在艺术家的模板周围创建一个阴影呢？

2 个答案: