css3-边框圆角阴影渐变

css3坚持渐进增强（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）原则。相对的是优雅降级原则，即是一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
css3中新增特性包括很多，如选择器，盒模型，背景和边框，文字特效，2D/3D转换，动画，多列布局。

圆角

 border-radius: 1-4 length|% / 1-4 length|%;

length定义圆角的形状，第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。 第二值省略的情况下，水平方向和竖直方向的半径相等。
%以百分比定义圆角的形状。
顺时针赋值，如果当前角没有赋值就取对角的值。

阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。
text/shadow 与其用法类似。

线性渐变

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

angle用角度值指定渐变的方向（或角度）。
side-or-corner 可以为left， right，top ，bottom。
to left设置渐变为从右到左。相当于: 270deg，以此类推。
color-stop = color [ length | percentage ]?
color指定颜色。
length：用长度值指定起止色位置。不允许负值
percentage：用百分比指定起止色位置。

 background:linear-gradient(
          to right,
          red 0%, red 25% ,
          blue 25%,blue 50%,
          green 50%,green 75%,
          pink 75% ,pink 100%
      ); 

径向渐变

radial-gradient指从一个中心点开始沿着四周产生渐变效果

  background: radial-gradient(
           150px  at  center,
           yellow,
           green
      );  

以上就是一个围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变的例子。
必要参数

1. 辐射范围即圆半径 (半径越大，渐变效果越大) ，其半径可以不等，即可以是椭圆。
2. 圆心的位置，参照的是盒子的左上角

//可以用横纵坐标来， 如果只提供一个，第二值默认为50%，即center
    background: radial-gradient(
            150px  at 0px  0px,
             yellow,
             green
        );

1. 渐变起始色
2. 渐变终止色