CSS背景图像exxpand as by content in html

Question

大家好，我正试图通过渐变框使用css创建一个信息框，该信息框的内容必须为expand，并且必须支持高达ie6的旧版本。我可以使用纯CSS and CSS3 which is not working on old browsers创建框，所以我计划使用背景图像概念来创建，但我无法完成。

这是用作背景的图像

渐变矩形框

然后我把图像切成四片，然后像一样使用这四个角进行样式和标记

CSS

.rounded-box{
    background: #fff url('../img/top-left-radius.png') no-repeat;
}
.top-right-radius{
    background: url('../img/top-right-radius.png') no-repeat top right;
}
.bottom-left-radius{
    background: url('../img/bottom-left-radius.png') no-repeat bottom left;
}
.bottom-right-radius{
    padding:20px;
    background: url('../img/bottom-right-radius.png') no-repeat bottom right;
}

HTML

<div class="rounded-box">
  <div class="top-right-radius">
    <div class="bottom-left-radius">
      <div class="bottom-right-radius">
        rounded box :-)
      </div>
    </div>
  </div>
</div>

它正确地添加了方框的角，现在问题是顶部、底部边界和中心背景梯度。我不知道该怎么做，请帮我解决

Answer 1

使用css3pie

http://css3pie.com/

或jquery插件

http://jquery.malsup.com/corner/

这两种解决方案都允许您实现跨浏览器兼容性。