CSS3 圆角（border-radius），css3 阴影（box-shadow），css3渐变（gradient）。

前缀

-moz(例如 -moz-border-radius)用于Firefox。-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

css3圆角代码

<div class="radius"></div>.radius {    padding:10px; width:300px; height:50px;    border: 5px solid #dedede;    -moz-border-radius: 15px;      /* Gecko browsers */    -webkit-border-radius: 15px;   /* Webkit browsers */    border-radius:15px;            /* W3C syntax */}

效果：

其他写法：

border-radius:5px 15px 20px 25px;               上  右    下   左css3阴影：语法：

外阴影：box-shadow:XYNpx #color;

内阴影：box-shadow:insetXYNpx #color;

文字阴影：text-shadow：XYNpx #color;

第一个属性：阴影的X轴(可以使用负值)

第二个属性：阴影的Y轴(可以使用负值)

第三个属性：阴影的像素（大小）

第四个属性：阴影的颜色

inset是设置内阴影

写法：

<div class="shadow"></div>

.shadow { width:300px; height:50px; box-shadow:0px 0px 8px #f00; }

效果：

css3渐变

线性渐变 - 从上到下

渐变代码：

<div class="gradient"></div>

.gradient { width:300px; height:50px; background: linear-gradient(top, #ff911b, #000); background: -webkit-linear-gradient(top, #ff911b, #000); background: -o-linear-gradient(top, #ff911b, #000); background: -ms-linear-gradient(top, #ff911b, #000); background: -moz-linear-gradient(top, #ff911b 0, #000 100%); filter: PRogid:DXImageTransform.Microsoft.gradient(startColorstr='#ff911b', endColorstr='#000', GradientType=0);/*ie6滤镜*/}

效果：