為側邊欄的標題框加上圓角

https://blogger-script-study.blogspot.com/2009/08/border-radius.html

「圓角框」總給人一種舒服的感覺，所以如果可以在自己的網頁中加入圓角框，除了可以增加親和力，也可以為自己的網頁加分，但圓角框卻是很多程式設計師的惡夢，一般較簡單的方法是使用預先畫好的圓角框圖形並把它設定為背景使用，但這種方法卻只能適用在固定頁面大小的網頁及部落格版型，當然也不是不能解決，就是麻煩了點。還好CSS3的草案中新增了一個叫 border-radius 的屬性，可以讓程式設計師輕鬆的作出圓角形狀，可惜的是目前只有 Firefox、Safari、及Chrome 支援此功能，Opera 及 IE8.0都不支援。

本篇文章就先分享如何用使用 border-radius 達成圓角框的效果。由於我們之前已經有設定過側邊欄標題的背景顏色，所以我們就援引側邊欄的標題方框例子，並把它改造成圓角框。

寫在前面

• 本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
• 更改 Blogger 的板型(template)前，請記得每次先備份自己的 【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。
• 本篇文章所採用的方法僅適用於 Firefox、Safari、Chrome等瀏覽器，不適用 IE(含8.0)、Opera。

更改板型－側邊欄標題背景框加圓角 

修改前的板型	修改後的板型(是否親和多了)

1. 一樣用搜尋功能找到【sidebar h2】，然後在定義側邊欄的地方新增兩行字。

• 適用於 Firefox 的圓角框指令，半徑為 8 個點。  -moz-border-radius: 8px;
• 適用於 Safari, Chrome 的圓角框指令，半徑為 8 個點。-webkit-border-radius: 8px; 
• 以上兩個指定都是試定整個方框的四個角為圓角，另外也可以單獨設定個別的角落為圓角
  • -moz-border-radius-topleft  適用於 Firefox, 設定左上角為圓角
  • -moz-border-radius-topright 適用於 Firefox, 設定右上角為圓角
  • -moz-border-radius-bottomleft 適用於 Firefox, 設定左下角為圓角
  • -moz-border-radius-bottomright 適用於 Firefox, 設定右下角為圓角 
  • -webkit-border-top-left-radius  適用於 Safraiire, Chrome, 設定左上角為圓角
  • -webkit-border-top-right-radius 適用於 Safraiire, Chrome, 設定右上角為圓角 
  • -webkit-border-bottom-left-radius 適用於 Safraiire, Chrome, 設定左下角為圓角 
  • -webkit-border-bottom-right-radius 適用於 Safraiire, Chrome, 設定右下角為圓角 
  • 這裡有三個圓角框的例子，就是使用個別設定圓角框的指定達成的:
    

▼未加側邊欄背景框程式碼的原始板型內容

程式碼	#sidebar h2 {   color:$sidebarcolor;   margin:0px;   padding:0px;   font:$headerfont; } #sidebar .widget {

▼ 已經加了側邊欄背景框程式碼的板型內容 (參考 如何更改Blogger側邊欄的標題成為有背景的文字 進一步了解)

程式碼	#sidebar h2 {   color:$sidebartitlecolor;   background-color:$sidebartitlebgcolor;   margin:0px;   padding-top:3px;   padding-bottom:3px;   padding-left:30px;   font:$headerfont; } #sidebar .widget {

▼修改後的板型內容(紅色為新增或修改的部份)，注意文字必須正確。

程式碼

#sidebar h2 {   color:$sidebartitlecolor;   background-color:$sidebartitlebgcolor;   margin:0px;   padding-top:3px;   padding-bottom:3px;   padding-left:30px;   font:$headerfont;   -moz-border-radius: 8px; /* 適用 Firefox  的圓角框指令 */   -webkit-border-radius: 8px; /* 適用 Safari, Chrome 的圓角框指令 */ } #sidebar .widget {

▼這是板型修改後的成果。 

 

---

回到 Blogger 部落格技巧總整理