使用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来创建包装器会让它不那么丑陋。所以我需要的帮助是确切地理解CSS将如何创建这些DIVs和图像(上面)使用滑动门的方法，以便角落将显示良好，特别是在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，但是，我不确定它是否适用于元素底部的渐变。