3

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

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

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

4

3 回答 3

7

使用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增加与旧浏览器的兼容性。

于 2012-01-30T08:17:15.197 回答
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;
}

看看这个！

于 2012-01-30T08:20:51.093 回答
1

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

于 2012-01-30T08:44:24.373 回答