CSS Button 按鈕生成器

很久沒POST文了，就來介紹這個CSS按鈕程式碼自動生成器。

這個網站提供的按鈕樣式很多樣，足以產生美麗的按鈕，所生成的按鈕，測試過在三大瀏覽器都大致OK，只有少少的可接受的差異。

有可以利用的省時省事工具，只要花少少的時間就可以做出美麗的按鈕，何必花時間自己去寫程式碼。

使用方式：

在右側欄的各個項目中，調整按鈕的樣式，在左邊可以即時看到按鈕的變化，一旦調整到自己想要按鈕，在按鈕本身按一下，即可在下方產生程式碼。

要是覺得程式碼太多，對於一些不想要的樣式變化，可以自己事後再css 檔案中稍微調整一下。

其實看各大型網站的按鈕樣式絕大多數都很基本，就是一個基本的背景色，配上字型色，因為這樣好維護，不會有任何瀏覽器問題，更省頻寛。


如果想要有點不一樣的按鈕，這個CSS Button 按鈕生成器不錯。

CSS：自動換行

自動換行可避免內容跑出設定的框框外或是單純為美觀設計。
語法：
外部CSS

.word-wrap {
  word-wrap:break-word;
}

行內CSS
<div style="word-wrap: normal">


屬性Property：word-wrap
值Value：１．bread-word自動換行　　２．normal不自動換行

CSS：圖片倒影教學

CSS圖片倒影語法：
-webkit-box-reflect: <direction> <offset> <mask-box-image>

• <direction>：用above, below, left 或 right，分別表示圖片產生倒影的方向為上、下、左或右。
• <offset>：設定倒影與圖片的距離，例如：3px，可不設定，若沒有設定預設為０，即圖片與倒影緊連無距離。
• <mask-box-image>：圖片光罩，可不設定，若沒有設定預設為０，即無光罩，倒影和圖片相同。

舉例：向下10px產生倒影

-webkit-box-reflect: below 10px