html - 创建块

Question

我必须像这样创建块:

替代文字http://img689.imageshack.us/img689/5397/samplek.png

如何使用css + html更快地完成此操作？

Answer 1

您必须创建8个具有透明度支持的图像.

侧面4张图片:顶部,左侧,右侧,底部

4个角落的图像

对于中间部分,您可以使用div并使用此背景颜色填充它.

如果你在谈论纯CSS方式,那么你需要知道它的当前状态不允许你以跨浏览器的方式既没有圆角也没有阴影.

当你有你的图像,你可以将它们粘在一起,如下所示:

<div style="background: url('/topleft.png') no-repeat;">
  <div style="background: url('/topright.png') right no-repeat;">
    <div style="background: url('/bottomleft.png') bottom no-repeat;">
      <div style="background: url('/bottomright.png') bottom right no-repeat;">

        <div style="padding: 0 5px; background: url('/top.png') repeat-x;">
          <div style="background: url('/bottom.png') bottom repeat-x;">
            <div style="position:relative; left: -5px;
                        background: url('/left.png') repeat-y;">
              <div style="position:relative; left: 10px;
                          background: url('/right.png') right repeat-y;">

                <div style="position:relative; right: 5px;
                            background: #fff68f;">
                   We got it!
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

PS,是的,这很疯狂,我知道.

PS#2:为了使它"快速",你可以将它们组合在一些主图像中并使用CSS sprites技术.但是要使它工作,你必须在图像之间容纳足够的空白空间(阅读文章以理解原因),否则这9个嵌套的div可以进一步爆炸.