background : white ; padding : 1px 10px 10px 10px ;box-shadow: 5px 5px 5px rgba( 0 , 0 , 0 , . 6 ); margin-bottom : 10px ; ``` 5. 「區塊標題樣式」指的就是「區塊標題」的外觀(底下是設定為:無框線;高40像素;行高40像素;框線離下個元素10像素;文字置中) ``` border: none; height: 40px; line-height: 40px; margin-bottom: 10px; text-align: center; ``` 6. 「區塊內容樣式」指的就是「區塊內容」的外觀 7. 邊框產生器:[http://border-image.com](http://border-image.com/) 8. 範例圖:![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/window-gui-hi.png) 9. 語法可以貼至區塊整體樣式,或者區塊內容樣式區: ``` border-style: solid; border-width: 21px 27px 27px 24px; -moz-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; -webkit-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; -o-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat; ``` 10. 精簡版可以這樣寫: ``` border-style: solid; border-width: 21px 27px 27px 24px; border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat; ``` 11. CSS樣式屬性以及可用的值可從這裡查詢:[ http://css.doyoe.com](http://css.doyoe.com/) 12. 文字陰影產生器: ### 二、特殊技法 1. 注意!並非所有佈景都支援此功能。(所有有支援 tad\_theme 的佈景都有支援) ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/logconuterx.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/mainmenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/openid.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/tadnews.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/usermenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/about_school.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/school_unit.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/theme.png) 2. 例如 school2019 的佈景主題 images 目錄下有一個 本站最新消息圖片 newstitle.png ,編輯區塊標題 改為 原區塊標題\[pic\]images/newstitle.png 3. 自己設計圖片要放在 網站/themes/school2019/images 目錄下 4. 以圖片取代區塊標題:「區塊標題**\[pic\]****http://圖片網址**」 5. 以圖片取代區塊標題(並套用區塊標題設定):「區塊標題**\[img\]****http://圖片網址**」 6. 加入小插圖:「區塊標題**\[icon\]****http://圖片網址**」 7. 藏區塊標題:「區塊標題**\[hide\]**」 8. 加入連結:「區塊標題**\[link\]http://網址**」 9. 向量圖示:[http://www.flaticon.com](http://www.flaticon.com/)、([下載所有圖檔](https://www.emojione.com/developers/download)) 10. 搜尋圖示:[http://findicons.com](http://findicons.com/)
border: none; height: 40px; line-height: 40px; margin-bottom: 10px; text-align: center; ``` 6. 「區塊內容樣式」指的就是「區塊內容」的外觀 7. 邊框產生器:[http://border-image.com](http://border-image.com/) 8. 範例圖:![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/window-gui-hi.png) 9. 語法可以貼至區塊整體樣式,或者區塊內容樣式區: ``` border-style: solid; border-width: 21px 27px 27px 24px; -moz-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; -webkit-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; -o-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat; ``` 10. 精簡版可以這樣寫: ``` border-style: solid; border-width: 21px 27px 27px 24px; border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat; ``` 11. CSS樣式屬性以及可用的值可從這裡查詢:[ http://css.doyoe.com](http://css.doyoe.com/) 12. 文字陰影產生器: ### 二、特殊技法 1. 注意!並非所有佈景都支援此功能。(所有有支援 tad\_theme 的佈景都有支援) ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/logconuterx.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/mainmenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/openid.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/tadnews.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/usermenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/about_school.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/school_unit.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/theme.png) 2. 例如 school2019 的佈景主題 images 目錄下有一個 本站最新消息圖片 newstitle.png ,編輯區塊標題 改為 原區塊標題\[pic\]images/newstitle.png 3. 自己設計圖片要放在 網站/themes/school2019/images 目錄下 4. 以圖片取代區塊標題:「區塊標題**\[pic\]****http://圖片網址**」 5. 以圖片取代區塊標題(並套用區塊標題設定):「區塊標題**\[img\]****http://圖片網址**」 6. 加入小插圖:「區塊標題**\[icon\]****http://圖片網址**」 7. 藏區塊標題:「區塊標題**\[hide\]**」 8. 加入連結:「區塊標題**\[link\]http://網址**」 9. 向量圖示:[http://www.flaticon.com](http://www.flaticon.com/)、([下載所有圖檔](https://www.emojione.com/developers/download)) 10. 搜尋圖示:[http://findicons.com](http://findicons.com/)
border-style: solid; border-width: 21px 27px 27px 24px; -moz-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; -webkit-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; -o-border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 repeat; border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat; ``` 10. 精簡版可以這樣寫: ``` border-style: solid; border-width: 21px 27px 27px 24px; border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat; ``` 11. CSS樣式屬性以及可用的值可從這裡查詢:[ http://css.doyoe.com](http://css.doyoe.com/) 12. 文字陰影產生器: ### 二、特殊技法 1. 注意!並非所有佈景都支援此功能。(所有有支援 tad\_theme 的佈景都有支援) ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/logconuterx.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/mainmenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/openid.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/tadnews.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/usermenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/about_school.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/school_unit.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/theme.png) 2. 例如 school2019 的佈景主題 images 目錄下有一個 本站最新消息圖片 newstitle.png ,編輯區塊標題 改為 原區塊標題\[pic\]images/newstitle.png 3. 自己設計圖片要放在 網站/themes/school2019/images 目錄下 4. 以圖片取代區塊標題:「區塊標題**\[pic\]****http://圖片網址**」 5. 以圖片取代區塊標題(並套用區塊標題設定):「區塊標題**\[img\]****http://圖片網址**」 6. 加入小插圖:「區塊標題**\[icon\]****http://圖片網址**」 7. 藏區塊標題:「區塊標題**\[hide\]**」 8. 加入連結:「區塊標題**\[link\]http://網址**」 9. 向量圖示:[http://www.flaticon.com](http://www.flaticon.com/)、([下載所有圖檔](https://www.emojione.com/developers/download)) 10. 搜尋圖示:[http://findicons.com](http://findicons.com/)
border-style: solid; border-width: 21px 27px 27px 24px; border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat; ``` 11. CSS樣式屬性以及可用的值可從這裡查詢:[ http://css.doyoe.com](http://css.doyoe.com/) 12. 文字陰影產生器: ### 二、特殊技法 1. 注意!並非所有佈景都支援此功能。(所有有支援 tad\_theme 的佈景都有支援) ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/logconuterx.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/mainmenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/openid.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/tadnews.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/usermenu.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/about_school.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/school_unit.png)![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/18/theme.png) 2. 例如 school2019 的佈景主題 images 目錄下有一個 本站最新消息圖片 newstitle.png ,編輯區塊標題 改為 原區塊標題\[pic\]images/newstitle.png 3. 自己設計圖片要放在 網站/themes/school2019/images 目錄下 4. 以圖片取代區塊標題:「區塊標題**\[pic\]****http://圖片網址**」 5. 以圖片取代區塊標題(並套用區塊標題設定):「區塊標題**\[img\]****http://圖片網址**」 6. 加入小插圖:「區塊標題**\[icon\]****http://圖片網址**」 7. 藏區塊標題:「區塊標題**\[hide\]**」 8. 加入連結:「區塊標題**\[link\]http://網址**」 9. 向量圖示:[http://www.flaticon.com](http://www.flaticon.com/)、([下載所有圖檔](https://www.emojione.com/developers/download)) 10. 搜尋圖示:[http://findicons.com](http://findicons.com/)