网页前端知识汇总（一）——CSS如何为网页图片设置圆角效果

是不是有的没有玩过程序的小伙伴浏览网页时会发现有的图片是圆角的，自己保存到本地却是直角的？其实图片性质没有改变，改变的只是网页显示，用遮罩层（CSS处理）后的显示效果，那这些图片的圆角效果是怎么设置的呢？下面我给大家讲解下

 

如如下代码：

<div class="pic"><img src="XXXX.jpg"></div>

你可以用CSS约束他大小，如

<style>
.pic{ width:500px; height:300px;}
.pic img{ width:100%;height:100%;}
style>

这样网页图片的大小就和父级DIV一样大小了

那如何约束圆角呢？你可以这样

<style>
.pic{ width:500px; height:300px;}
.pic img{ width:100%;height:100%; border-radius: 50%;}
style>

就这样，图片变成一个圆形图片了，具体角度参数可以根据自己喜好左右调整

CSS能改变的只是显示效果，并不能改变图片的本质属性