圆角盒技术

Question

有谁知道使用CSS创建圆角盒的很好的例子：

1. 所有的4个角和4个侧面图像。双方已经反复img
2. 宽度不变，而高度灵活
3. 工作都在FF 3.x中，IE 7或以上版本，Chrome

让我知道。谢谢

Answer 1

那么，你可以用3个div来做到这一点。

<div class="bg"><div class="top"><div class="bot">text here</div></div></div> 

bg会对CSS像

background: url(path/to/repeated/background.gif) repeat-y; 

凡背景跨越div的整个宽度，因为它是恒定的。这将平铺你的左右两侧。

然后对于顶部和底部只使用图像与no-repeat top left;和no-repeat bottom left。他们每个人都有两个角落，加上所有形象的善良。

希望如果您对CSS有足够的理解，可以从中填写详细信息。是

Answer 2

我还不知道任何这样的代码。但我知道一个没有图像的css圆角的最佳代码。

看看这个link

它在所有浏览器的工作，易于实现。伟大的事情是它在ie6中运行良好！..伟大的无..

Answer 3

CSS3属性为边界的图像，如下所示：

 
border-image: 
border-top-image 
border-right-image 
border-bottom-image 
border-left-image 
border-corner-image: 
border-top-left-image 
border-top-right-image 
border-bottom-left-image 
border-bottom-right-image 

实施例：

 
border-image: url(border.png) 27 27 27 27 round round; 

从Mozilla的IE，铬不同，Safari浏览器即 使用属性开始-moz比其他-webkit

欲了解更多解释ñ关于这些属性请看这些定义和例子。

Source1， Source2