一直以来，都将自己定义为前端白痴，html、css、javacsript基本属于入门级别，虽然能够做点东西，但完全不能运用的自如，很多内容都不了解。最近由于项目的需要，自己承担了大部分的前端工作，所以只能学习起来，边学边做，实在遇到无法解决的问题，就求教于公司的前端大神。
之间一直2B的以为圆形的头像都是由UI扣出来的图，自己只要使用图片就好了，然而可以使用CSS属性border-radius轻松搞定。
- 圆形div
<style type="text/css">
#div{
border-radius: 100%
}
</style>
<div id='div'>我是圆的</div>
- 圆角矩形
<style type="text/css">
#div{
border-radius: 10px; // 可根据需要调整值
}
</style>
<div id='div'>我是圆角矩形</div>
使用这样的设置我们得到的是一个四个角都是圆角的矩形，如果我只希望一个角或两个角为圆角要怎么处理呢？
其实还是使用border-raduis就好了，因为它是支持输入4个值的，分别表示左上角、右上角、右下角、左下角，所以完全可以根据需要来设置不同的角的圆角样式。
例如，我设置左上角和右上角为15px，右下角和左下角位10px，那么只需要用下面的代码：
<style type="text/css">
#div{
border-radius: 15px 15px 10px 10px; // 可根据需要调整值
}
</style>
<div id='div'>我是左上角和右上角为15px，右下角和左下角位10px的圆角矩形</div>
