如何在CSS中制作圆角边缘？

Question

我是一个网页设计的初学者，所以我有一个非常业余的问题要问。我创建了一个文本框，但不知道如何使边缘变为圆形而不是矩形。我知道CSS功能是矩形边框。如果可能的话，我还想在框下面添加轻微阴影，但我不确定如何实现这一点。以下是我专门用于框部分的代码：

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

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

- user1111042

---

可能是Rounded Corners的重复问题。 - sandeep

Answer 1

使用 border-radius 和 box-shadow。

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

Here are the parameters for each...

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

你可能希望在CSS3属性前加上-webkit和-moz，以增加与旧浏览器的兼容性。

- Alex Coplan

---

需要注意的是，这在IE8及更早版本中不起作用，并且如果想要支持Android和OS X以及iOS上的早期Safari版本，则使用-webkit-box-shadow：的webkit供应商前缀非常有用。 - VoxPelli

Answer 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;
}

来看看这个！

- Fotis Adamakis

Answer 3

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

- onionpsy