有時一篇文章落落長, 想要為文章分段設定不同的大小標題好讓一篇篇長長的文章有分段區塊的感覺.

此篇介紹的程式碼可以貼在單篇文章的[<>HTML檢視]裡, 只單為特定的某些文章做設定, 也可以選擇貼在Blogger主題模版裡, 為整個網站的某個特別的標題做固定的背景設定.

在開始前, 先簡單介紹一下Blogger文章編輯列裡提供的4個標題的屬性.

在文章[段落]下, 有大標籤/標題/子標題/小標題4種. 它們的HTML tag分別如下, 當然啦, 你也可以自行定義你想要設定標題背景的標題為h5/h6/h7...

大標籤 - h1

標題 - h2

子標題 - h3

小標題 - h4

所以, 下面的CSS程式碼裡的heading tag就依據你想要加上標題背景的tag來自行修改.

簡單介紹一下

⧭ 背景形狀設定:

border-radius:5px 50px;
如果想要標籤背景呈現成的四個直角, 那麼把上面的 5px 50px; 變成 100px

-moz-border-radius:5px 50px;
設定同上.

⧭ 背景漸層顏色設定:

background:-moz-linear-gradient(right,#ccc 20%,#000 20%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#000),color-stop(1,#ccc));

如果不想背景是漸層顏色, 那麼把二個顏色都設定同樣的色碼即可. 可以在這裡查HTML顏色代碼.

請注意: 0.20 這裡的數字大小決定了左邊顏色的長度, 舉例數值愈大左邊的顏色愈長.

⧭ 背景框線設定:

border:1px solid #999;
這裡可以設定標題背景框線的粗線/框線格式/框線顏色.

框線格式有以下幾種選擇:

➤ dotted - 點點邊框
➤ dashed - 虛線邊框
➤ solid - 實線邊框
➤ double - 雙線邊框
➤ groove - 3D立體溝槽式邊框
➤ ridge - 3D立體突起式邊框
➤ inset - 3D立體邊框
➤ outset - 3D立體邊框
➤ none - 取消邊框
➤ hidden - 隱藏邊框

講了一堆的設定, 還是要實測才能清楚明白如何設定才是自己想要的格式, 可以到這裡來測試框邊和漸層顏色: