CSS学习笔记 3 : 图象

灵活的圆角框

谁说CSS不能创建漂亮的圆角框，这个效果怎么样？它还是活的，能根据内容自动伸展。不错吧 :)


其原理示意图如下
:

.box {
  width:20em;
  background:url(image/bottom-left.gif) no-repeat bottom left;
}

.box-outer {
  background: url(image/bottom-right.gif) no-repeat right bottom;
  padding-bottom:5%;
}

.box-inner {
  background: url(image/top-left.gif) no-repeat left top;
}

.box h2 {
  background: url(image/top-right.gif) no-repeat right top;
  padding-top:5%;
}

.box h2, .box p{
  padding-left:5%;
  padding-right:5%;
}

其html代码是这样的:

<div class="box">
  <div class="box-outer">
    <div class="box-inner">
      <h2>CSS圆角框</h2>
      <p>谁说CSS不能创建漂亮的圆角框，这个效果怎么样？它还是活的，能根据内容自动伸展。不错吧 :) </p>
    </div>
  </div>
</div>

从上面的代码，我们看到，为了实现该效果，添加了两个额外的无语义元素，这是不理想的。框少还行，多了就不能容忍了，怎么办，用JavaScript吧！ :）

阴影

下面这个图片的阴影效果是用CSS实现的: