Question

嗨，正如我在CSS编码新手之前所说过的那样，我想知道是否有可能仅使用CSS创建一个玻璃板（vista /七像但没有按钮），我知道如何制作圆角：

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

我已经在photoshop上创建了图形并切片

从这里的答案中取出，但是我如何制作左边的div棒并自动扩展到底部并留有一些余量？或者这是一种更简单的方法？我只是不想使用表格甚至最差的JS（还不知道如何使用这种语言）......

任何答案都将不胜感激！

Answer 1

包含背景图片的3个div。将图像分成3个部分。顶部中间和底部。顶部有一个顶级玻璃。底部有底部玻璃。并重复中间的一个。并将内容放在中间div。

如何使用PNG在模板周围实现PS-CS4上创建的玻璃效果？

1 个答案: