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

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

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

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

smlkrxs0703

You may also like...

Top