8-3 區塊標題技法

一、後台設定技法

1. 後台佈景設定中的區塊設定可對每個區域的區塊調整標題外觀
2. 若是想調整成這樣：
   
3. 則可照著以下內容設定：
   
4. 「區塊整體樣式」指的就是「整個區塊」的外觀（底下是設定為白底，內容離下方框線10像素，套用陰影，離下方元件10像素）

   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
8. 範例圖： 
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
12. 文字陰影產生器：https://www.we-shop.net/css3/text-shadow.html

二、特殊技法

1. 注意！並非所有佈景都支援此功能。（所有有支援 tad_theme 的佈景都有支援）
   
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://emojione.com/（下載所有圖檔）
10. 搜尋圖示：http://findicons.com