如何用css制作图片自动圆角，谢谢了！

html-css011

如何用css制作图片自动圆角，谢谢了！,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：img { border-radius: 20px}。

3、浏览器运行index.html页面，此时页面插入的图片会自动显示圆角20px的。

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

代码实例：border-radius: 15px

1、把下列代码添加进入你的<style>标签内

2、清空缓存，看看效果吧（部分IE版本可能不支持）

预览

总结

这是个很实用的方法，可以让图片看起来更「精巧」一些

你可以用css3的多层背景，把4个圆角图片放到上下左右四个地方，缺点是低版本ie不鸟。

或者嵌套四层div，div宽高都设为一样，每个div上放一个圆角背景：

<div>

<div>

<div>

<div></div>

</div>

</div>

</div>