Question

有没有人知道使用CSS创建圆角框的好例子：

所有4个角和4个边都是图像。双方重复img
宽度恒定而高度灵活
在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，Chrome，Safari不同使用以 -moz 以外的 -moz 开头的属性

有关这些属性的更多说明，请查看这些定义和示例。

Source1， Source2

圆角盒技术，图像四周为边界

3 个答案: