html - 如何在 CSS 中使边缘变圆？

Question

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

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

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

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 */
}

这里是每个参数...

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

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