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. 漸變終止色