WordPress等網站前端美化之給圖片添加圓角！

在瀏覽過眾多網站之後，感覺網站的前端體驗對用戶來說很重要，一個感覺好看的網站就有一種想再次訪問的慾望，個人感覺為圖片或者卡片添加一個圓角特效逼格就會立馬上升一個等級！

目前想到的給圖片或者卡片添加圓角特效的有如下兩種方法！

一、圖片處理過程加添加圓角特效！

如果你經常使用PS處理圖片，最後多加幾部操作即可！這也是我經常採用的方法。因為懶得去改代碼，並且最近考試也很多！

①所有圖層複製一層，合併一個圖層。

②選中整個圖片，可以點擊「頂部菜單的選擇，然後點擊全部」，還可以通過按住ctrl點擊圖層！

③點擊頂部菜單的"選擇>修改>平滑」，設置四角的半徑，建議是5-10之間，具體可以多試幾次，找一個自己看著舒服的值。

④ctrl+j，把選中的部分複製一個新圖層，隱藏舊圖層。

⑤點擊頂部菜單的"文件>導出>儲存為web所用格式」，如果是2015版本之前的直接點擊文件就可以找到儲存為web所用格式，圖片格式選擇png，如果你保存為jpg格式，四角就會被填充為白色，如果你的網站背景為白色，就不會被發現，如果你的網站背景為別的顏色盡量保存為png格式！

二、給圖片和圖片所在的div添加css樣式！

這種方法一勞永逸，而且不僅適用於圖片，還適用於卡片。也發現了好多博客網站都才用了這種方法，尤其是感覺知更鳥的主題卡片加上圓角之後看著舒服了很多！

①用瀏覽器打開網頁，F12審查元素，找到想添加特效的圖片或卡片所在的div和其css屬性名稱！

②在瀏覽器中添加代碼，預覽效果。

③在源代碼中添加代碼！

所有邊框圓角10個像素：border-radius: 10px;

左上部邊框圓角10個像素：border-top-left-radius: 10px;

右上部邊框圓角10個像素：border-top-right-radius: 10px;

左下部邊框圓角10個像素：border-bottom-left-radius: 10px;

右下部邊框圓角10個像素：border-bottom-right-radius: 10px;

文章轉載自一艘大輪船：http://www.dlc618.com/post-499.html