html - CSS 背景图像按 html 中的内容扩展

Question

大家好，我正在尝试通过渐变框使用 css 创建一个信息框，它必须 expand 因为它的内容变大并且必须支持旧版本到 ie6我可以使用不能在旧浏览器上工作的纯 CSS 和 CSS3 创建框，所以我计划使用背景图像概念来创建它，但我无法完成它。

这是用作背景的图像

Gradient rectangle box

然后我将图像切成四片，然后使用这四个 Angular 设置样式和标记

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>

它正确地添加了盒子的 Angular ，现在问题是顶部、底部边框和中心背景渐变我不知道如何做请帮助我

Answer 1

使用 css3pie

http://css3pie.com/

或jquery插件

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

这两种解决方案都可以让您实现跨浏览器兼容性。