微生活

css3 实现div圆角和阴影

作者：Jeen 发布于：2013-4-21 20:10 Sunday 分类：Web开发

rounded corners and shadow  for   Firefox, Safari/Chrome, Opera and IE9.

使用css 3 实现 div 层的圆角和阴影

Here’s a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:

#Example_A
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

#Example_B
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

#Example_C
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

#Example_D
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

#Example_E
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

#Example_F
-moz-border-radius: 35px;
border-radius: 35px;

The box-shadow property can accept a comma-serparated list of shadows

参考网站：css3.info

标签: css