善用CSS輕鬆製造圓弧角和陰影效果

以前要做像範例圖這樣的圓弧角和陰影的立體效果，要切割很多元素再用圖放到背景來製造效果，若沒算準在使用者放大或縮小時會跑版，頁面就變難看，用圖做的效果很沒有彈性，要改變圓弧角弧或陰影大小和色彩度就必須請美術設計者重繪圖，很不方便。

自從主流流覽器像chrome、firefox和IE 11都CSS3後，做圓弧角和陰影就超簡單，隨時可適需要改變設定。

圓弧角css code

• 四個角都一樣時  {border-radius: 10px;}
• 指定左上角 {border-top-left-radius: 10px;}
• 指定右上角 {border-top-right-radius: 6px;}
• 指定左下角 {border-bottom-left-radius: 5px;}
• 指定右下角 {border-bottom-right-radius: 10px;}

線上產生圖弧角工具

http://border-radius.com/

可以利用此網站在線上繪製理想的解度後，再取用css code相當方便，同時可提供 WebKit 、Gecko和  CSS3的cdoe。
先在某一角填入孤度的數字，例如：20就表示為20px
若四個角要同時變化，在同一角變更數字即可
若在其他解填入不同的數字時，則指定輸入的角就會和其他角不同步，依此類推。

陰影css code

• 基本語法
  box-shadow:         top right bottom left rgba(R, G, B, 透明度); => 可設定透明透
  或
  box-shadow:         top right bottom left color; => 不設定透明度
• 範例
  box-shadow:         2px 0px 15px 0px rgba(129, 50, 50, 0.75); => 可設定透明透
  box-shadow:         2px 0px 15px 0px #ccc; => 不設定透明度

線上輔助工具

http://css3gen.com/box-shadow/
到此網站，可以設定角度(Angle)、陰影距離(Distance)、模糊度(Blur)、rgb色彩、透明度(Opacity)就會自動在下方產生支援WebKit 、Gecko和  CSS3的css cdoe。

此網站同時有提供其他的輔助工具可參考，若覺得不錯要記得給網站在FB上按個讚。