直到最近才發現原來它可以內嵌到blog跟大家分享效果阿:D，哈哈，我真的很落伍，這個網站推出也好一陣子了，居然最近才知道他可以分享。

因此我也手癢起來，想利用 Jsfiddle跟大家分享一些語法，然後把它貼到我的blog，因此就簡單寫了幾個css3 的按鈕變換效果。

真的是非常簡單的三個...哈哈，大家有興趣就自己把code帶回去吧:)。
這次主要是試用 Jsfiddle 的預覽效果，真的很不錯耶!

通常設計部落格的第一步，一定都會想把自己的部落格標題用圖片裝飾的漂漂亮亮，而不是用部落格預設的制式文字。但如同前面所提到，一般要用圖片就是在HTML裡寫下插入圖片的語法，可是部落格不開放修改HTML，我們所能使用的方法是，隱藏這些制式文字，用自己做的圖片取代。那麼，要怎麼寫呢？我這邊整理了幾個例子跟寫法，提供給大家做參考。不過因為我沒針對任何BSP的code做研究，所以關於css對應的類別(id、class)，請依照自己的部落格狀況做修改，謝謝。

1.把部落格標題改成圖片

假設現在的情況如下圖所示(左邊是文字，右邊是圖片)：

我們無法修改的HTML語法如下：

<h1 class="title"><a href="http://blog.mukispace.com">MUKI space*</a></h1>

首先，先做好一張你要置換的圖片，請記好圖片的長、寬。在此假設圖片長427px，寬72px。
請寫入以下css語法：

1
2
3
4
5
6
7
8

h1.title a {
background:url(images/title.jpg); /*請修改成你要替換的圖片*/
display: block;
font-size: 0;
height: 72px;  /*該圖片的高度*/
width: 427px; /*該圖片的寬度*/
text-indent: -5000px;
}

接著存檔，就可以發現文字已經替換成圖片囉

2.用兩張圖片做連結替換效果

第1點提到的方法，只是將文字換成圖片，但滑鼠移過他不會有任何的改變。如果我們希望滑鼠移過A圖片，會換成B圖片，可以參考以下語法(我們需要的素材有：兩張大小尺寸一樣的圖片，假設這兩張檔名為a.jpg 以及 b.gif)：

1
2
3
4
5
6
7
8
9
10
11
12

h1.title a {
background:url(images/a.jpg); /*預設圖片*/
display: block;
font-size: 0;
height: 72px;  /*該圖片的高度*/
width: 427px; /*該圖片的寬度*/
text-indent: -5000px;
}
 
h1.title a:hover {
background:url(images/b.gif); /*滑鼠移過後會出現的圖片，兩張圖片的檔案類型(副檔名)可以不同*/
}

除了可以分成兩張圖片做替換之外，我們也可以將兩張圖片做成同一張。做成同一張的好處是，可以節省讀取你網站的時間，因為對瀏覽者而言，他只要「讀取一張圖片」，而非兩張。

這是把兩張圖片作成一張的樣子： 單張圖片尺寸是 長300px，高150px；兩張合起來就是300x300(px)

要特別注意的是: 兩個單張圖片的尺寸要一樣，不能一張高100px，另外一張高200px唷! 以下是CSS參考語法：

1
2
3
4
5
6
7
8
9
10
11
12
13

h1.title a {
background:url(instead2.jpg); /*預設圖片*/
display: block;
font-size: 0;
height: 150px;  /*該圖片的高度*/
width: 300px; /*該圖片的寬度*/
text-indent: -5000px;
}
 
h1.title a:hover {
background:url(instead2.jpg) 0 150px; 
/*第一個0是X軸，第二個150px是Y軸*/
}

3.用圖片取代項目符號

部落格側邊欄，常常會需要作一些條列式的項目，像是「最新文章」。如果想要在這些文章前面加上可愛的圖案，應該怎麼設定呢？
在此假設HTML是這樣寫的：

1
2
3
4
5

<ul class="article">
   <li><a href="#">標題A</a></li>
   <li><a href="#">標題B</a></li>
   <li><a href="#">標題123456789</a></li>
</ul>

1
2
3

ul.article {list-style-type:none;}  /*先把原本的項目符號給隱藏*/
.article li {background:url(instead2.jpg) no-repeat;}
.article li a {padding-left:5px;}  /*這邊的5px，建議可以設定為你的圖片寬度再多加5px*/

4.讓側邊攔的標題有美美的背景圖

側邊欄標題如果要有背景圖，寫法其實很簡單，假設html這樣寫：

1
2
3

<div class="sidebar">
   <h3>我是標題</h3>
</div>

css請這樣寫：

1

.sidebar h3 {background:url(images/bg.jpg);}

以上是幾個簡單的圖片變換技巧，幾乎都是用 background 作設定，簡單好上手，提供給大家做參考

但，我還是開始碰觸Compass了...。大概有10%原因是受到這張比較圖的影響▼

甚麼!!Compass居然自居是武裝過後的CSS!!!
基於好奇探究，也基於工作上的需要(其實主因80%是工作關係OTL)，所以我決定來玩玩Compass。

在使用Compass之前，我一直很怕用習慣後，會忘掉正統的CSS寫法。幸好目前寫了三、四行，還沒忘記原本的....。那麼剩下10%使用Compass的原因，是想挑戰自己。

人活到一個階段，會開始抗拒學習新事物，變得比較沒有挑戰性、墨守成規。老實說，我不想變成這樣的人，我也害怕自己變成這樣子。雖然我一開始不能接受Compass，但是，為什麼我要抗拒它呢？雖然我擁護著正統的CSS，但我還是可以學習改良過後的Compass，正所謂知己知彼，百戰不殆嘛！

然後...，從安裝開始就是一條艱辛的路途，因為國內使用Compass的人不多，加上沒有人從頭到尾去寫教學，所以我決定自己寫一篇，給那些想玩Compass卻不知從何玩起的朋友一個參考。

甚麼是Compass

簡而言之，就是另外一種撰寫CSS的方式(工具)，簡單舉例幾個我覺得還不錯的特色(我非程式評測背景出身，所以不談數據理論，只說我自己的感想)：

【1.解決瀏覽器不相容:】
這我還沒實際用過，但聽說Compass可以幫你解決瀏覽器不相容的問題。也就是說，你不用再開每個瀏覽器在那邊看哪裡跑掉，然後針對跑掉的部分寫hack，慢慢地去刻。只要在Compass寫上幾行語法，他就可以自動幫你產生相關hack。(但不是所有的hack)

【2.簡化css代碼：】
Compass透過一種「全域變數」的邏輯，可以有效簡化CSS代碼。比如今天在很多class都用到"紅色"，Compass可以讓你只要修改一次，就可以把所有紅色都取代掉。
可以在style文件最前面寫上:

$red: #ff0000

class裡頭：

a {
color: $red;
}

.h1 {
color: $red;
}

往後只要改 $red: #ff0000，就可以全部替換掉了。

【3.會幫你除錯】
因為要把compass檔案轉成css時，會先經過compile(編譯)，compile的過程中，有問題就不會讓你過，會告訴你哪裡有錯。(是不是很有按下.net三角形icon的FU...，發明Compass的人一定是程式面出身的!!!)

【4.自動幫你補完CSS3語法】
假設今天要寫一個圓角效果，因為要考慮每個瀏覽器的相容模式，所以我們至少會寫三行：

img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

但是你在compass只要寫

img
+border-radius(5px)

就好了!!
當然，前提是要import一些設定檔進來，有興趣的朋友可以直接參考Compass官網給的範例。

關於Compass的優勢，大致上我比較注意的就是這些，聽同事說還有CSS Sprite的設定簡化，但我還沒研究，所以就不贅述了。

如果看到這，還有興趣的話，就一起來安裝Compass吧!!

Compass安裝使用目錄

1. 前言
2. 安裝Compass與建立專案
3. 嘗試開始寫Compass
4. 後記

但使用這個語法，有時成功、有時又會失效，在不太清楚原因的情況下，我改用了其他方法實現我想要的區塊水平垂直置中，在這邊也整理出來分享給大家，希望對你們有所幫助:)

首先先看範例：

首頁、前導頁、形象頁，區塊水平垂直置中

這是我部落格現在的首頁，有興趣研究的朋友，可以直接到我的首頁網站觀看。但其實眼尖的朋友會發現我的垂直區塊並沒有完全置中，因為這部分是可以作微調的，以下會做說明。

我使用的css語法設定如下：

#div {
width:450px;/*必須要設定你整個DIV區塊的寬度*/
position:absolute;
margin:-100px 0px 0px -200px;/*調整水平垂直置中*/
top: 50%;
left: 50%;
overflow: auto;
}

如果你想來點特別的，不想要那麼剛好在正中央，可以對margin:-100px 0px 0px -200px;進行微調。像我的首頁是寫成margin:-200px 0px 0px -200px;，所以才沒有剛好在垂直中線上。

參考資料
該語法來源自mycelly.com的Nice and Free CSS Templates，他網站還有更多各式各樣的佈局參考，包含二欄、三欄，甚至是特殊欄位的樣板。找到你想要的樣板點下去就可以看到他的css+xhtml原始碼囉。

購物車圖片水平垂直置中

如果是想要讓每張圖片都水平垂直置中，像是購物車，或是相簿的圖片展示，可以參考以下css語法：

css語法設定

#img {
float:left;
/*以下是寬&高不是圖片的寬&高，而是包覆圖片的DIV的寬&高*/
width:240px;
height:155px;
border:1px solid #d0d0d0;
text-align:center;
/*line-height設定是重點，建議可以設成跟height一樣*/
line-height:155px;
/* IE */
/* 專為IE7調整，140px=155px*0.8 */
*font-size : 140px;
*font-family : Arial;
}

應用在xhtml裡頭可以寫成：

<div id="img"><img src="圖片位置" border="0" /></div>

參考資料
該語法來源自Vexed's Blog，這設定方法應該是原作者自己想出來的，裡頭也有詳細解釋到為什麼IE要*0.8做設定，還有更多細部的修正&微調。

大家可以發現原作者提供的語法較長，我的短很多。雖然短，我提供的語法卻同樣適用於Firefox、Google Chrome、Opera、Safari、IE6、IE7、IE8...等瀏覽器，那是因為我的xhtml有做DOCTYPE的Strict宣告，如果你們不希望語法那麼長，也可以考慮做個DOCTYPE宣告喔。

至於如果宣告DOCTYPE呢？只要在你的html檔案最上方加入這段語法就可以了!!!     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

親手打造部落格的家：WordPress架站、管理、經營

剛剛收到消息說，我寫的這本書要二刷了!!!

不過可能是因為換了新工作，一直處在早起晃神的狀態，所以一開始收到這個訊息還蠻平淡的。直到過了幾分鐘才慢慢有種興奮的感覺，哇塞，二刷耶，好屌唷!!!! 然後這個月也要開始在大陸發行這本書了，真的很期待吶。

但是....

這邊要跟大家致上深深的歉意，因為我只是個超小咖的作者，所以當我收到要二刷的訊息時，書已經在印製了。

所以....

有讀者發現的BUG仍然沒有做修正。

真的要跟大家說聲抱歉，雖然小咖不是藉口，但他真的是個理由，我完全是最後一個才知道消息的人。OTZ

既然BUG沒有辦法在書上做修正，我決定先在我的BLOG放在網友找到的一些筆誤BUG，供大家做為修正的參考。這些BUG多由SR提供，在這也要大力感謝SR，他真的很用心的看我寫的書、我寫的每個字:)

第7-4頁

第一段倒數第6行：
我們馬上呼叫TinyMCE編輯器隱藏功能，只要點選編輯器最"左"邊的按鈕
更正為
我們馬上呼叫TinyMCE編輯器隱藏功能，只要點選編輯器最"右"邊的按鈕
(抱歉啦，MUKI左邊右邊，真的是傻傻分不清楚。)

第7-11頁

步驟3：
接著打開「wp-includes\js\"(空白) "quicktags.js」
更正為
quicktags.js前面多了一個空白，請把它刪除，路徑這裡是沒有空白的唷。

第7-36頁

第二段：
至於其它國內BSP是否支援MT匯出，可以觀看下表的簡單整理:
更正為
請忽視這句話，我沒有放表....
(抱歉，當時本來要整理一張表的，可是最後漏掉了。)

第8-18頁

8-2-4定義註釋：
註釋的標籤為「<!-->...<-->」
更正為
註釋的標籤為「<!--註釋內容-->」
(手滑滑很大...)

第9-6頁

第二段：
divc和span的差異
更正為
div和span的差異
(請原諒我再度手滑...)

第9-9頁

子選擇器的介紹：
我在範例程式碼裡頭寫了兩個同樣的id：child；但其實同一張網頁是不能重複出現ID的，所以我這邊是錯誤示範，請大家不要學我....。
(我錯了，我真的錯了)

以上就是我的筆誤彙整，雖然都是一些小地方，但還是很對不起大家。
我在校稿的時候可能眼花了OTZ。

總之，書要二刷了，也要推出簡體版了，我很開心(Y)。

對了，如果還想買這本書的朋友，可以參考這篇文章的賣場整理

親手打造部落格的家：WordPress架站、管理、經營

2010年2月2日，我寫的書正式上市囉。

各大通路販售地點

目前已知可在以下地點購買(香港也買得到囉!!!)：
【網路書店】
1. 博客來書籍館(9折)：
http://www.books.com.tw/exep/prod/booksfile.php?item=0010460373
2. 松崗購物網(85折)：
http://www.kingsinfo.com.tw/item_detail.asp?pro_id=7406
3. 金石堂網路書店(79折)：
http://www.kingstone.com.tw/book/book_page.asp?LID=se008&kmcode=2013120106079
4. 天瓏資訊圖書(75折)：
http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=9789867309099&sid=55071
5. PCHOME線上24小時專區(75折)：
http://shopping.pchome.com.tw/?mod=item&func=exhibit&IT_NO=DJAA1W-A46044400&c=A05
(pchome目前是375元，為全台最低價，優惠到3/15日唷)
6. 誠品網路書店(85折)
http://www.eslite.com/product.aspx?pgid=1001113631922795

PCHOME還有幫我們的書做了宣傳banner以及eDM呢，真是感動
→ 宣傳banner位置
→ 圖片：

→ eDM連結

【實體書店】
1. 天瓏資訊圖書
2. 益大資訊
[香港!!!] 3. 溢東昇電腦書公司 。 TEL : 2748-6120 。 地址 : 九龍深水土步福華街146-152號黃金商場地庫34號 。 聯絡人 : 鄧太太 OR 阿婷
(建議先打電話問店家有沒有貨，不要白跑一趟:P)

為自己的部落格建個家吧！

不再依附在大型部落格服務平台BSP的主機下，為自己的部落格找個空間、申請網域，設計屬於自己的部落格樣式，這才是經營部落格的好方法。WordPress是一個開放原始碼的部落格軟體，使用者可隨心所欲自訂站台，就像親手裝潢自己的房間一樣，並能藉由模組工具，讓WordPress結合SEO，優\化網路搜尋引擎功能，增加部落格的曝光度。
作者從最初的親自架站、到最後該如何結合網路行銷，不藏私地詳解WordPress經營必經之路，是該好好寵愛一下自己的部落格了！

本書特色

．結合部落格架站及管理，完整呈現部落格經營幕後工程。
．獨家附贈虛擬 LAMP 環境，架站、備份不求人。
．收錄知名部落客：Vista、高登、香腸與WordPress之間的心路歷程。

目錄

‧ Chapter 1 從Web2.0 開始的革命浪潮
部落格並不是崛起的理所當然，Web 2.0大大地影響的我們的網路使用方式，關於Web 2.0和部落格的歷史您不可不知。
‧ Chapter 2 幫你的WordPress 準備一個家
決定用WordPress做為你的部落格管理工具了嗎？先幫部落格找個房子吧！
‧ Chapter 3 申請WordPress專用的域名和主機
擁有自己的網址域名是最能能代表自己的了，讓自己的名字被拉到最前頭來，才能不在茫茫網海中被淹沒。
‧ Chapter 4 安裝及設定你的WordPress
如何安裝WordPress？程序好像很複雜，安裝過程中要注意甚麼？在安裝過程中作者必須要讓你知道的重要觀念，不藏私全部出手！
‧ Chapter 5 建立最完美的LAMP 環境
要在自己家裡架站應該注意的事，建立良好的架站環境。
‧ Chapter 6 基本的WordPress使用
安裝好WordPress也建立好了架站環境後，先來熟悉WordPress的基本操作用途！
‧ Chapter 7 不可不知的WordPress 進階功能
那些在大型部落格服務平台BSP的功能，在WordPress中也能自己做，先做好這一步，日後便能更加有效管理你的部落格。
‧ Chapter 8 改造你的Wordpress 佈景主題
新家需要裝潢，新的部落格也需要設計，打造自己喜歡的部落格佈景主題。
‧ Chapter 9 運用css讓你的主題排版更流暢
CSS能控制網頁的文字、版面設定，舒服的排版也是讓讀者喜歡閱讀部落格的要素之一。
‧ Chapter 10 使用外掛擴充Wordpress功能
提供各種推薦外掛，讓部落格功能更完整。
‧ Chapter 11 絢爛的特效讓Wordpress與眾不同
互動式網頁讓讀者閱讀輕鬆、使用方便，你也可以使用AJAX和jQuery打造一個！
‧ Chapter 12 瞭解部落格受歡迎的程度
部落格的曝光率決定於甚麼？簡單幾個瞭解自己部落格的方法。
‧ Chapter 13 推廣你的部落格
網路行銷的時代開始，怎樣才是受歡迎的部落格？身為部落客要做些甚麼才能讓部落格更廣為人知？
‧ Chapter 14 SEO的重要性
並不是每個部落格的SEO方式都一樣，找出適合自己部落格使用的SEO，才能真正切入重點。
‧ Chapter 15 當部落格開始賺進第一桶金
環境、內容、行銷都有了，部落格就可以開始為我們帶來收益了。利用部落格賺錢是多少都會有的心願，賺錢也有不得不知的方法。
‧ Chapter 16 和社交網站的整合
網路社交是互動的好方法，Facebook、Twitter、Plurk崛起，部落客該如何善加利用？
‧ Chapter 17 自動同步及備份WordPress網站
別讓辛辛苦苦建立的心血流失了，搭配本書附贈的虛擬LAMP環境，輕鬆備份WordPress。

線上試閱

需要試閱的朋友可以到博客來網站進行試閱喔。

優惠活動

本書以我個人名義，跟裕藍多媒體工作室合作，只要購買他的主機方案再加200元就可以獲得這本書(附上我的簽名喔)！

寫在後頭

書出了真的很開心，也請大家多多支持，有任何問題、感想，或是發現錯誤一定都要告訴我
讓我可以做得更好喔:)

reset.css 語法

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button,textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
img {border: 0;}
:focus {outline: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}

input, button, textarea,select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {font-size: 100%;}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {*font-size: 100%;}
body {line-height: 180%;}
ol, ul, li {list-style: none;}
:link, :visited , ins {text-decoration: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

在這個重製表裡頭，我主要的設定就是將整張網頁，包含圖層、表格、項目符號...等的邊界都設成「0」，為的是讓所有瀏覽器在初始條件下完全相等。
此外還有把每個人的字體都調成100%，同樣是讓瀏覽器環境相等。

接著是網頁的按鈕元素，在字體大小、顏色、樣式....等地方我都設定了「inherit」這個繼承屬性，他可以用來繼承父元素的設定。如果不懂繼承的概念，可以參考CSS選擇器說明裡頭第四點：子選擇器，有稍微提到繼承的意思。

重製表主要就是要解決瀏覽器之間的不同，所以我做的設置大概是這樣。

重製表的製作很簡單，只要抓住一個概念，他是為了要讓網頁在一開始，在所有瀏覽器都長得一模一樣。只要抓住這個原則就好了~

有關其他重製表的介紹，可以參考以下兩篇文章：
1. 快速寫好css的五種方法 (在第一點有提到css重置)
2. 打造自己的reset.css

最後請再容許我打一下廣告：我的書上市啦!!!
「親手打造部落格的家：WordPress架站、管理、經營」

親手打造部落格的家 WordPress架站、管理、經營

從去年9月開始寫的WordPress書籍，終於要在今年年初問世了。
因為是第一次寫書，也怕可能寫到最後被腰斬、或是寫不好不出版的情況下，我一直都很低調，默默進行我的寫書活動，也因此知道我要出書的朋友們並不多。直到確定送印了，連封面都出來了，我才敢開始大肆宣揚

1/29新增公告：上市日期確定啦!!!!
1/18新增公告：本書的促銷活動
1/13新增：本書的作者陣容
1/13新增：針對上市的Q&A

訂購訊息(NEW)

這本書將在2010年02月02日正式上市!!!!在博客來書籍館已經有商品圖片及內容的介紹，大家可以到博客來看喔~
博客來書籍館＞ 親手打造部落格的家：WordPress 架站、管理、經營

最新公告

【1月18新增】：「WordPress架站、管理、經營」，有以我的個人名義，跟裕藍多媒體工作室合作，只要購買他的主機方案再加200元就可以獲得這本書(附上我的簽名喔)！

作者有誰

這本書的作者除了我MUKI之外，還有一位vaemon(虛擬先生)，他在電腦軟體以及虛擬機的操作上算得上是達人一位，有興趣的朋友也可以到他的部落格參觀唷。

關於本書

這本WordPress工具書，主要是寫給入門新手，以及中階使用者閱讀的。
書裡頭會從無到有，教導大家怎麼架設WordPress，還會介紹各種免費、付費主機的差異性 (我想這對新手來說應該是很實用的)。
此外，我也有從WordPress的四大構面來思考，篩選出我覺得很實用的WordPress外掛分享給大家。外掛都有附上安裝檔案，可以從附贈的光碟裡頭安裝，或是直接從WordPress.org下載。
書裡也會獨家解說WordPress特有的php函數運用，這部份的教學對我來說算是一個新的開始，也很高興能將這些東西分享給你們。
當然還有大家最期待的部份!!! 就是看到muki就會想到的 「佈景主題」跟「CSS」啦~

在書裡頭我有放上一連串的CSS以及HTML教學，希望大家可以很快速的上手，並且知道如何修改自己的佈景主題。
此外還會分享WordPress相關的實用技巧，包含像是敗家誌的阿諾最想知道的迴響樣式，還有一些jQuery運用，這些都是我沒公開放在部落格，只有買書的人才會知道的喔。

上市Q&A

上市之前想必大家有許多疑問，我也在此一一為大家解答說明

Q.我跟muki認識，交情應該也不錯，那muki會送我書嗎？

A.這邊要跟大家說聲抱歉，雖然我會有書，但因為我收到的贈書不多，所以沒辦法一一送給大家，很抱歉。

Q.一本書大概多少錢？

A.此書為全彩印刷，價格為新台幣500元整。

Q.買很多本會打折嗎？

A.這可能要直接詢問出版社唷，不過一次訂購10本應該會有折扣的。

Q.我買書muki會幫我簽名+合照嗎？

A.如果出版社不會幫我舉辦簽名會，只要你有買書上台北找我，我都一定會幫大家簽名+合照(請自備相機)。

Q.為什麼問你很多資訊你都說不確定？

A.在這要跟大家說聲抱歉，因為我只是一個小咖作者，與出版社聯繫都是透過vaemon虛擬先生，所以我並沒有任何的決定權。

想對大家說

這本書是我的處女作，從去年9月陸續忙到年底，而寫作當時正好是工作最忙碌的時候，所以每天加班回家就是趕著寫書，深怕不能如期交稿。
因此，我投入了非常多的心血在裡頭，包含以前從未深入接觸過的WordPress函數運用，我也特地到WordPress.org官方網站，去一個一個瞭解這些函數是如何運用，嘗試著用最淺顯易懂的方式教導大家。
也許在撰寫過程中，仍然有一些不足的地方，也希望大家看了這本書之後可以告訴我哪裡寫的不好需要修改，你們的意見我都會仔細聆聽的:)

我會陸續在這篇文章裡頭更新書籍的相關宣傳資料，確切上市日期我並不清楚，但是跟大家保證年初一定會上市，所以請跟我一起期待吧 。

以往這樣切圖切到最後都會瘋掉，尤其是只是要一個單純的圓角。

幸好css3有了這一項新的技術，我們可以直接用語法設定圓角，不用再切一堆圖了。

css3公佈的圓角語法為border-radius，雖然現在還沒完全正式定案，但是已經有許多瀏覽器利用這個函式，一樣可以支援圓角語法。像是Mozilla類的-moz-border-radius以及WebKit類的-webkit-border-radius。以Mozilla為基底的瀏覽器，最典型的代表就是FireFox；而WebKit類的則是Safari以及Google Chrome。

以下是border-radius在每個瀏覽器不同的語法表示：

PS.目前IE瀏覽器不支援css3的這些技術，未來要等IE9上市才會支援唷。

-moz-border-radius使用方法：

以下跟大家介紹要如何在網頁中使用border-radius。因為我使用的瀏覽器是FireFox，所以在此我以-moz-border-radius為例，如果想要在Safari應用，就將-moz-改為-webkit-即可。

WebKit的特殊效果

-webkit-border-radius 針對圓角，還有做出陰影、旋轉等特殊的效果。好消息是FireFox 3.5也支援該功能，只要將-webkit改為-moz- 就可以直接使用。

FireFox3.5 新技術

FireFox3.5版針對圓角，多了一個新的功能。這個新功能我還不太清楚要怎麼定義他，你可以想成是它可以針對一個邊角再產生二種圓角效果，詳細請看範例。

--
--
以上就是css圓角(border-radius)的一些介紹，現在也有愈來愈多人都在使用相關的技術代替圖片，讓自己的網頁更添活潑，也可以減少讀取圖片資源。

對以上教學如果有任何疑問，或發現有錯誤的地方，歡迎在底下留言討論，我會在最快的時間內回覆:)

另外要強調的一點是，我的工作=\=css人員，不是每天都在那邊寫css啦~。我的工作是網頁設計(設計是個多麼美妙的詞阿)，所以會大量用到PhotoShop以及Flash軟體，拜託別再問我「你是不是每天都在寫CSS」這種問題，我不想回答了 。

Q.如何讓DIV區塊居中？

A.假設你的DIV總寬度是900px，我們可以這樣寫：

Q.為什麼IE對於margin的算法有些不同？

A.當我們針對div設定了浮動(float)屬性之後，IE瀏覽器就會將margin加倍計算。例如我們設定margin-left:5px;，IE會算成10px。解決的方法是在該浮動區塊加上「display:inline」即可解決這個問題。

Q.為什麼設定超連結的visited會失效？

A.超連結的樣式有一定的順序，如果你同時要設定visited(訪問過的連結)，或是active(作用中的連結)，必須要按照這個順序設定：a:link→a:visited→a:hover→a:active。我們不用死記順序，可以這麼記：love、hate

Q.如何在圖片上方放置flash？

A.有時候我們會看到有人的圖片上有flash的光圈特效，如果你要使用該特效，請將圖片設定為背景圖，然後在上方插入flash，記得要將flash設置為透明屬性：

Q.在火狐瀏覽器設定最小高度

A.一般對區塊設定高度(height)後，在火狐瀏覽器中如果輸入超過高度的文字，區塊不會被撐開。如果我們希望可以設定最小高度，同時又希望文字過多可以撐開區塊的話，可以將你的區塊改寫為：

div {
height:auto!important;
height:100px;
min-height:100px;
}

以上幾項常見的問題，供大家參考。如果還有其他問題，歡迎留言告訴我~~