div的弯曲角边框

Posted 2023-03-06

【中文标题】div的弯曲角边框

【英文标题】：Curved corner border for a div

【发布时间】：2010-09-26 14:20:02

【问题描述】：

我需要构建一个带有弯曲角边框的 div，而不使用角落中的任何图像。有可能吗？

我不想在角落插入弯曲的图像，请帮我解决这个问题。

【问题讨论】：

检查 this post - 一个非常简单的跨浏览器 CSS3 代码。

【参考方案1】：

http://www.curvycorners.net/

试试这个库，它给我带来了奇迹！这是一个经过测试的跨浏览器解决方案。

【讨论】：

那个网站好像是down。 Last project update 于 2011 年 3 月。项目托管于 Google Code。

【参考方案2】：

你可以在现代浏览器中使用 CSS 来实现圆角...

border-radius: 10px;

Handy Generator

这被称为progressive enhancement。 IMO，这比带有边距和边框的图像和/或 CSS 技巧要好。除非你绝对必须有圆角。

【参考方案3】：

如果你想依赖 webkit 和 mozilla 浏览器，可以使用以下 css 命令：

.radius 
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
    

详情可查看here。

可以在here找到有关 CSS2 规范边框半径的信息

不幸的是，这些不适用于 ie。

您可以只使用niftycube 为 IE 使用 javascript 路由，这具有支持列高度调整而没有问题的额外好处。

【参考方案4】：

这是我写的，如果你喜欢，欢迎使用。它使用背景颜色渲染任何尺寸的圆角框，但在整个框周围没有边框。它适用于白色页面背景，但可以通过编辑 c1、c2 和 c3 样式中的边框颜色来更改。

.rounded background-color:#f1f0f1
.rounded .inner padding:8px 10px 8px 12px
.rounded .c1 height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px
.rounded .c2 height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px
.rounded .c3 height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px


   <div class="rounded" style="width:200px;height:100px">
    <div class="c1"></div><div class="c2"></div><div class="c3"></div>
        <div class="inner">
        -- Content Here --
        </div>
        <div class="c3"></div><div class="c2"></div><div class="c1"></div>
   </div>

【参考方案5】：

我会使用 jQuery 插件来处理圆角。以下是 jQuery 网站上可用的圆角插件列表：http://plugins.jquery.com/taxonomy/term/189