我如何使用CSS创建圆角?
当前回答
我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。
其他回答
自从引入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
要让圆角发挥作用是多么复杂,甚至雅虎都不鼓励他们(见第一个项目符号)!当然,他们在那篇文章中只谈论了1像素的圆角,但有趣的是,即使是一家拥有他们专业知识的公司也得出结论,让他们大部分时间工作太痛苦了。
如果你的设计可以在没有它们的情况下存活,这就是最简单的解决方案。
我通常得到圆角只是与css,如果浏览器不支持他们看到的内容与平角。如果圆角对你的网站不是很重要,你可以使用下面的线条。
如果你想使用相同半径的所有角,这是一个简单的方法:
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
但如果你想控制每一个角落,这是很好的:
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
正如你所看到的,在每一组中,你都有特定于浏览器的样式,在第四行中,我们以标准的方式声明,我们假设在未来,如果其他人(希望也是IE)决定实现这个功能,让我们的样式也为他们做好准备。
正如在其他回答中所说,这在Firefox, Safari, Camino, Chrome上都能很好地工作。
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
如果你对在IE中创建角感兴趣,那么这个可能会有用- http://css3pie.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选择器语法是什么?