html5 img圆角,用 CSS3 给 图片添加圆角

网页里面插入图片，有时候会出现图片边缘和网页底色相同或相近的情况，看起来容易眼花。

之前如果用CSS进行图片圆角是一件非常麻烦的事情，而如果手动将图片剪裁成圆角对于直接从网上扒下来的图又太麻烦了。

而 CSS3 提供了 border-radius 属性，可以直接为图片添加圆角。以下只针对 WordPress 的 CSS 文件，其他网页类推。

打开 Style.

将其修改为

img {

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

其后的 10px 中的数字可以按照喜好任意更改。

如果原本的主题 CSS 文件中已经包含了边框设置，则只需要添加

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

即可。

不过上面 CSS 目前圆角只支持 Webkit 内核浏览器和 Gecko 内核浏览器，如需支持 KHTML 还需另行添加，在此不赘述。

另外 Opera 支持度不详， IE 系列不用说了。