目录
问题引入：
如何实现元素的圆角样式：
使用圆角属性细节：
格式：
实操演示：
案例：
一，实现正圆；
二，实现胶囊按钮
问题引入：
我们在学完盒子模型之后，创建的盒子总是方方正正的，然而在实际应用中我们总会遇到一些圆角的边框或者盒子（如下图），那么他是如何实现的呢？
如何实现元素的圆角样式：
我们可以通过 CSS border-radius 属性，实现任一元素的“圆角”样式。圆角边框属性border-radius是CSS3新增的属性，在圆角边框属性出现之前，我们想要实现圆角边框都是用圆角图片做背景实现的， 然而现在有了圆角属性就很方便了，可以设置任一样式的圆角；
使用圆角属性细节：
圆角边框属性 ：border-radius：可以为元素添加圆角边框，他的属性值设置和外边距、内边距的设置方式一样，可以是一个值也可以是二、三、四个值；语法是从左上方开始顺时针依次设置，如果哪一个角没有设置就看他的对角；
格式：
border-radius:数字+px；
border-radius:百分比；//百分比最大是50%
- 四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
- 三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：
- 两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
- 一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：
实操演示：
要求：将下列左图变成右图；
/* <div class="box"></div>*/
.box{
width: 200px;
height: 100px;
background-color: pink;
border-radius: 10px;
margin: 50px auto;
}注意：比如我们设置如下格式：
border-radius: 30px 50px 60px;
/*border-radius: 30px 50px 60px 50px;*/效果同上此时我们按照语法是仅仅设置了左上，右上，右下，三个角的圆角，左下角没设置，那么浏览器是如何处理的呢？看它的对角也就是右上，如果某个角没设置，就看他的对角，与他的对角处理相同；
案例：
一，实现正圆；
/* <div class="box"></div>*/
.box{
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
margin: 50px auto;
}
二，实现胶囊按钮
/* <div class="box"></div>*/
.box{
width: 300px;
height: 100px;
background-color: pink;
border-radius: 30px;
margin: 50px auto;
}
