我如何使用CSS创建圆角?
当前回答
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
其他回答
在Safari, Chrome, Firefox > 2, IE > 8和Konquerer(可能还有其他)中,你可以在CSS中使用border-radius属性。由于它还不是规范的正式部分,请使用特定于供应商的前缀…
例子
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScript解决方案通常会添加一堆小的div来使它看起来圆角,或者使用边框和负边距来制作1px的缺口角。有些还可能在IE中使用SVG。
在我看来,CSS的方式更好,因为它很简单,并且在不支持它的浏览器中会优雅地降级。当然,这只是客户端在不受支持的浏览器(如IE < 9)中不强制执行它们的情况。
自从引入CSS3以来,使用CSS添加圆角的最好方法是使用border-radius属性。你可以阅读属性的规范,或者在MDN上获得一些有用的实现信息:
如果您使用的浏览器没有实现border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5),那么下面的链接详细介绍了一大堆不同的方法。找一个适合你的网站和编码风格的,然后使用它。
CSS设计:创建自定义角 &边界 CSS圆角'Roundup' 25圆角技术与CSS
正如Brajeshwar所说:使用border-radius css3选择器。现在,您可以分别为基于Mozilla和Webkit的浏览器应用-moz-border-radius和-webkit-border-radius。
那么,ie浏览器会发生什么呢?微软有许多行为使ie浏览器有一些额外的功能,并获得更多的技能。
这里:一个.htc行为文件,用于从CSS中的border-radius值获取圆角。为例。
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
当然,行为选择器不是一个有效的选择器,但你可以把它放在一个不同的css文件与条件注释(仅适用于IE)。
行为HTC文件
在创建Stack Overflow的早期,我看到了这一点,我找不到任何创造圆角的方法,让我感觉自己就像走过下水道一样。
CSS3最终定义了
border-radius:
这正是你想要的效果。虽然这在最新版本的Safari和Firefox中运行正常,但在IE7或Opera中就完全不行(我想在IE8中也不行)。
与此同时,这一切都是黑客所为。我很想听听其他人认为在IE7、FF2/3、Safari3和Opera 9.5之间实现这一点的最干净的方法是什么。
如果你要使用边界-半径解决方案,有一个很棒的网站可以生成css,使它适用于safari/chrome/FF。
无论如何,我认为你的设计不应该依赖于圆角,如果你看看Twitter,他们只是对IE和opera用户说F****。圆角是一个很好的选择,我个人认为这是为那些不使用IE的酷用户保留的:)。
当然,这不是客户的意见。 链接如下:http://border-radius.com/
推荐文章
- 在输入数字中隐藏上下箭头按钮(旋转器)- Firefox 29
- 如何用CSS“裁剪”一个矩形图像成一个正方形?
- Angular 2:如何为组件的宿主元素设置样式?
- 如何使用jQuery添加' style=display:"block" '到一个元素?
- 跨浏览器窗口大小调整事件- JavaScript / jQuery
- 为什么在scss/css的文件名前面放“_”或“_”?
- 我可以将CSS样式应用于元素名称吗?
- 我怎么能发送一个内部<div>到它的父<div>底部?
- font-style: CSS中的斜体vs斜体
- 改变引导输入焦点蓝色发光
- 我如何使一个div上的滚动条只在必要时可见?
- CSS:控制项目符号和<li>之间的空格
- 调试打印样式表的建议?
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?