使用jQuery圆角（图像）角落

Question

我想使用单张图像（上图）将圆角应用于多个块。我知道有可用的角落插件，但我需要使用图像以获得最大的兼容性。因此，据我所知，唯一的方法是在块周围创建包装以应用角落图像：

<div class="wrapper-4"> <!-- top-left corner -->
  <div class="wrapper-3"> <!-- top-right corner -->
    <div class="wrapper-2"> <!-- bottom-left corner -->
       <div class="wrapper-1"> <!-- bottom-right corner -->
          <div class="content"> <!-- Content Block -->
            I feel squeezed!
          </div>
       </div>
    </div> 
  </div>
</div>

丑陋我知道，但这是我猜的唯一方法，使用jQuery创建包装器会让我觉得它不那么难看。所以我需要帮助的是理解如何使用滑动门方法围绕这些DIV和图像（上图）创建CSS的确切位置，以便角落显示得很好，特别是在IE中。我使用滑动门方法创建了按钮，但从未尝试过这个。

感谢任何帮助。谢谢！

Answer 1

要继续使用您所知道的方式，您可以尝试以下方式：

$(div.content).each(function() {    
    $(this).wrap('<div class="wrapper-4"><div class="wrapper-3"><div class="wrapper-2"><div class="wrapper-1"></div></div></div></div>');
});

Answer 2

有一个JQuery插件可能会有所帮助：http://plugins.jquery.com/project/corners 但是，我不确定这是否适用于元素底部的渐变。