CSS之圆角属性

今天我们就来学习一下圆角属性（border-radius），看看它到底是怎么样的吧。
首先，我们先新建一个盒子，用来观察圆角属性。需要注意的是这个盒子至少要有背景(background)或者是边框（border）的其中之一

这个是我的样式，大家可以参考

#box {
    width: 200px;
     height: 100px;
     border: 1px solid;
     background: #ccc;
     border-radius: 10px;
   }

当border-radius只有一个值的时候，这个值会同时影响四个角

border-radius: 10px;
// 效果如下

当border-radius有两个值的时候，第一个值影响左上右下两个角，第二个值影响右上左下两个角

border-radius: 20px 10px;
// 效果如下

当border-radius有三个值的时候，第一个值影响左上角，第二个值影响右上左下两个角，第三个值影响右下角

border-radius: 30px 20px 10px;
// 效果如下

当border-radius有四个值的时候，这四个值一次影响左上右上右下左下四个角

border-radius: 40px 30px 20px 10px;
// 效果如下

以上就是border-radius的基础用法了，大家可以自己去试试哦。
当然border-radius还有八个值的用法哦，大家可以自行探索。

结尾

谢谢大家的观看，您的支持就是我的最大动力，谢谢。