2/1的藝術家

這邊敎的是如何把原本方方正正的文章閱讀區變成圓角的矩形
實際的例子如下圖所示
可以發現範例的四個角都圓角
現在就來敎大家如何製作



製作圓角

首先先用影像處理軟體製作兩個圓角的圖檔
如下所示：

圓角Ａ


圓角Ｂ





編寫 css 語法

由標籤的結構可以把文章區分為 .date 和 .blogbody 兩大類
如下圖所示：




輸入下列語法：

.date {
  background-image : url( 圓角A );       /* 設定 圓角A 為背景圖 */
  background-repeat:no-repeat;       /* 背景圖不重複 */
  background-position:top left;         /* 背景圖位於左上的位置 */
  }

.blogbody {
  background-image : url( 圓角B ) ;       /* 設定 圓角B 為背景圖 */
  background-repeat:no-repeat;            /* 背景圖不重複 */
  background-position:bottom left;          /* 背景圖位於左下的位置 */
  background-color:#f2f2f2;                     /* 把背景色和背景圖的顏色相同 */
  }


如此一來就大功告成囉~