css3圆角边框和边框阴影示例

给元素添加圆角边框，border-radius是CSS3中的一项神奇功能。IE9+、Chrome、Safari 5+以及Firefox 4+等现代浏览器都支持这一特性。你可以轻松地为input、div等元素设置边框，让它们的边角变得圆润。

border-radius与常规的border属性相似，你可以为四个角分别设置半径，也可以一次性设置四个角的半径。语法非常简单明了：

例如：`border-radius: 1-4 length|% / 1-4 length|%;`

为了照顾旧版本的浏览器，比如Firefox，我们可以使用`-moz-border-radius`前缀，而对于Chrome，则使用`-webkit-border-radius`前缀。

按照top-left、top-right、bottom-right和bottom-left的顺序设置每个radius的值。如果省略bottom-left的值，它将会与top-right的值相同；如果省略bottom-right的值，它将会与top-left的值相同；如果省略top-right的值，它将会与top-left的值相同。

让我们看一些例子：

1. `border-radius: 2px;` 这段代码等价于为每一个角分别设置2px的圆角半径。

2. `border-radius: 2em 1em 4em / 0.5em 3em;` 这段代码则更为详细地设置了每个角的半径。

除了border-radius之外，还有一个非常有用的属性是box-shadow，它可以在元素框上添加一个或多个阴影效果。这一属性在现代浏览器如IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1中都能得到支持。

其语法为：`box-shadow: h-shadow v-shadow blur spread color inset;`

其中，h-shadow和v-shadow是必需的，代表水平和垂直阴影的位置，可以赋值；blur是可选的，表示模糊距离；spread也是可选的，表示阴影的尺寸；color则是阴影的颜色；inset则是将外部阴影转变为内部阴影。

例如：`box-shadow: inset 3px 3px 6px ccc;` 这段代码就为元素添加了一个内部阴影效果。

border-radius和box-shadow为网页设计师提供了更多的创意空间，让网页元素更加生动、丰富。