圆角盒技术，以四周为边框的图像答案

【问题标题】：Rounded corner box technique with images all around as borders圆角盒技术，以四周为边框的图像
【发布时间】：2009-09-06 05:13:19
【问题描述】：

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

告诉我。谢谢

【问题讨论】：

【解决方案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 的图像。它们每个都有 2 个角，加上中间的所有图像。

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

【讨论】：

【解决方案2】：

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

看看这个link

它适用于所有浏览器并且易于实现。最棒的是它在 ie6 中运行良好！..太棒了..

【讨论】：

【解决方案3】：

边框图片的CSS3属性如下：

边框图像：边框顶部图像右边框图像边框底部图像左边框图像边框角图像：边框左上角图像边框右上角图像边框底部左图像边框右下角图像

例子：

边框图像： url(border.png) 27 27 27 27 圆形；

Mozilla 与 IE、Chrome、Safari 不同，即使用以 -moz 开头的属性，而不是 -webkit

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

【讨论】：