免修圖，透過 CSS 直接讓圖片呈現圓角

現在越來越多的瀏覽器支援 CSS3 了，現在想要在 WordPress 中讓圖片呈現圓角就不再需要透過修圖的方式了（害我以前都傻傻的用 powerpoint 的懶人方法修），只要在「style.css」（或著更直接的在「控制台」>「外觀」>「編輯CSS」的 CSS 樣式編輯器）增加幾行代碼就輕鬆搞定了。

p img{
/* 支援 Chrome, Safari */ 
-webkit-border-radius: 10px; 
/* 支援 firefox */ 
-moz-border-radius: 10px; 
border-radius: 10px; 
}

後面語法裡的 px 跟使用其他 css 語法時相同，數字越大效果越明顯。除了圓角程度的差別，也可以分別指定圖片的左、右、上、下四個角落是否要變成圓角。比方說將圖片右下角變成圓角的程式碼就改成：

/* 右下角變圓角*/
p img{
  /* 支援 Chrome, Safari */
  -webkit-border-bottom-right-radius: 10px;
  /* 支援 firefox */
  -moz-border-radius-bottomright: 10px;
  border-bottom-right-radius: 10px;
  }

依照上方程式碼舉一反三類推，左下角就把 chrome, safari 的「-bottom-right-」改成「-bottom-left-」，firefox 部份的「-bottomright」改成「-bottomleft」；而相對於下方的 bottom，上方就用 top 吧！