【CSS应用篇】——CSS如何实现圆角边框

目录

问题引入：

如何实现元素的圆角样式：

使用圆角属性细节：

格式：

实操演示：

案例：

一，实现正圆；

二，实现胶囊按钮

---

问题引入：

我们在学完盒子模型之后，创建的盒子总是方方正正的，然而在实际应用中我们总会遇到一些圆角的边框或者盒子（如下图），那么他是如何实现的呢？

如何实现元素的圆角样式：

       我们可以通过 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;（该值用于所有四个角，圆角都是一样的）：

 实操演示：

要求：将下列左图变成右图；

   /* 
*/
    .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;*/效果同上

此时我们按照语法是仅仅设置了左上，右上，右下，三个角的圆角，左下角没设置，那么浏览器是如何处理的呢？看它的对角也就是右上，如果某个角没设置，就看他的对角，与他的对角处理相同；

案例：

一，实现正圆；

   /* 
*/
    .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
            margin: 50px auto;
        }

  二，实现胶囊按钮

   /* 
*/
 .box{
            width: 300px;
            height: 100px;
            background-color: pink;
            border-radius: 30px;
            margin: 50px auto;
        }