如何在CSS中使边缘变圆？答案

【问题标题】：how to make edges round in CSS?如何在CSS中使边缘变圆？
【发布时间】：2012-01-30 08:12:59
【问题描述】：

我是网页设计的初学者，所以我有一个相当业余的问题要问。我创建了一个文本框，但我不知道如何使边缘变成圆形而不是矩形。我知道 CSS 在矩形边框上起作用。如果可能的话，我还想在框下方添加一个轻微的阴影，我也不确定如何实现。这是我专门针对盒子部分的代码：

#wrapper{
border: solid 1px #eeeeee;
}

“#wrapper”指的是另一个文档中的一段php代码。谢谢。

【问题讨论】：

Rounded Corners的可能重复

标签： html css border rounding paragraph

【解决方案1】：

使用border-radius 和box-shadow。

#wrapper {
    border: solid 1px #eee;
    border-radius:10px; /* round corners */
    box-shadow:0px 3px 5px 5px #000; /* add shadow */
}

这里是每个参数...

border-radius:(radius of border corners)
box-shadow:(horizontal offset) (vertical offset) (blur) (spread) (color)

您可能希望为您的 CSS3 属性添加 -webkit 和 -moz 前缀，以增加与旧浏览器的兼容性。

【讨论】：

应该注意，这在 IE8 和更早版本中不起作用，如果想要支持 Android 和OS X 和 iOS 上的早期版本的 Safari。

【解决方案2】：

#wrapper {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

检查this！

【讨论】：

【解决方案3】：

对于不支持border-radius的浏览器，可以使用roundies.js。

【讨论】：