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([
[|to
-corner
>
],]? 
[, >
]+)

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，從黃顏色到綠顏色做漸變的例子。

必要引數

輻射範圍即圓半徑 (半徑越大，漸變效果越大) ，其半徑可以不等，即可以是橢圓。

圓心的位置，參照的是盒子的左上角

//可以用橫縱座標來，如果只提供乙個，第二值預設為50%，即center background : radial-gradient( 150px at 0px 0px, yellow, green

);

漸變起始色

漸變終止色