6-4 區塊標題技法

一、後台設定技法

1. 後台佈景設定中的區塊設定可對每個區域的區塊調整標題外觀
2. 若是想調整成這樣：
   
3. 則可照著以下內容設定：
   
4. 邊框產生器：http://border-image.com
5. 範例圖：
6. CSS樣式屬性以及可用的值可從這裡查詢： http://css.doyoe.com
7. 文字陰影產生器：https://www.we-shop.net/css3/text-shadow.html
8. 建議的「區塊整體樣式」指的就是「整個區塊」的外觀：

   background: rgba(255, 255, 255, 0.5);
   border: none;
   border-radius: 6px;
   padding: 0px;
   margin:0px 0px 20px;

   Copy

   花邊框範例

   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;
   margin-bottom: 3rem;

   Copy

    

9. 建議的「區塊標題樣式」指的就是「區塊標題」的外觀：

   padding: 6px;
   text-align:center;
   font-family: 微軟正黑體;
   background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
   /* text-shadow: -1px -1px 0 #2e2e2e, 1px 1px 0 #d2d2d2; */
   text-shadow: 0px 1px #0d4e5c, 1px 0px #0d4e5c, -1px 0px #0d4e5c, 0px -1px #0d4e5c, -1px -1px #0d4e5c, 1px 1px #0d4e5c, 1px -1px #0d4e5c, -1px 1px #0d4e5c;

   Copy

    

10. 建議的「區塊內容樣式」指的就是「區塊內容」的外觀

    padding: 5px 0px 10px;

    Copy

     

二、特殊技法

1. 注意！並非所有佈景都支援此功能。（所有有支援 tad_theme 的佈景都有支援）
   
2. 以圖片取代區塊標題：「區塊標題[pic]http://圖片網址」
3. 以圖片取代區塊標題（並套用區塊標題設定）：「區塊標題[img]http://圖片網址」
4. 加入小插圖：「區塊標題[icon]http://圖片網址」
5. 藏區塊標題：「區塊標題[hide]」
6. 加入連結：「區塊標題[link]http://網址」
7. 向量圖示：http://www.flaticon.com、http://emojione.com/（下載所有圖檔）
8. 搜尋圖示：http://findicons.com