「Border-radius」的八个值
知识往往随时间淡忘，沉心在开发中时间长了，发现好些知识已经又模糊了，一些很好用的属性，其本身就有，却忘了，然后绕个大圈子自己实现了一套，究其原因，还是因为一开始没有掌握牢固和透彻
# 都知道是圆角
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。他用于向 block 级别元素增加圆角
语法
border-radius: 1-4 length|% / 1-4 length|%;
按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。
# 实现一个圆
在不使用 canvas 和 svg 的情况下，用 border-radius 就能简单实现一个圆
<div>
<p></p>
</div>
div {
width: 100px;
height: 100px;
}
p {
width: 100%;
height: 100%;
background: lightgreen;
border-radius: 50&;
}
为什么定义一层 '多余' 的
<div> ? 居然说我多余，不解释，自己理解去。╭(╯^╰)╮
# 实现一个圆环
给圆加一个边框，然后不绘制圆的背景颜色就好了？是的，就是这样
p {
width: 100%;
height: 100%;
border: solid 3px lightgreen;
border-radius: 50%;
}
什么？你觉得这样宽度超出了原本的宽度？你怎么辣么多问题呢！我想婧婧
box-sizing: border-box; // 规定元素的宽高包含了元素边框的大小
将上述样式加入到p的样式中，唉，瘦了一圈，好神奇
给p元素增加box-sizing属性
# 实现一个 半圆
砍掉一半就好了，不过这时候就不能用 border-radius 的简写形式了
p {
width: 100%;
height: 50%;
background-color: lightgreen;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
# 实现一个 小房子 ？
上方一个半圆，下方一个“半方”
p {
width: 100%;
height: 100%;
border: solid 6px lightgreen;
box-sizing: border-box;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
好吧，他更像一个窗户
# 认真点好吧，说好的八个值呢？
如果我们想写一个能直接调用的具有自适应功能的半圆，假如我们直接改成百分比，如下
p {
width: 100%;
height: 50%;
background: lightgreen;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
这是什么东西，感觉和上面那个房子好像啊，难道是设置50%不行？试试100%？
border-top-left-radius: 100%;
border-top-right-radius: 100%;
我去，怎么还是和上面的一样？先设置一个试试？
border-top-left-radius: 100%;
/* border-top-right-radius: 100%; */
这是什么鬼，等等，想想，设置了
border-top-left-radius: 100%; 也就是说，圆角按边长的100%来设置，长和宽不一样的情况下，圆角的两侧依然严格按边长来设置，难道可以写两个值？ 如果我这么写呢？
border-top-left-radius: 50% 100%;
/* border-top-right-radius: 100%; */
咦，居然不报错，真的可以这么写啊！可是谁先谁后呢？左边和上边谁的优先级高呢？唉，border的定义顺序有奥秘，居然是先
top 再 left，对的，果然是先上边再左边。依照这个规律，增加上右角效果呢？
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
半圆实现了！那如果我想简写呢？这样？
border-radius: 50% 100% 0 0;
我去，怎么又坏了，怎么办怎么办！ 唉，不对，我这么写的话相当于是：
border-top-left-radius: 50%;
border-top-right-radius: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
这明显不对啊，难道简写的时候一条边只能设置一个值？感觉不科学啊！
再看看定义？中间那个斜杠是什么鬼，难道！！！
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
哇哦，实现了。祝大家大吉大利新年快乐新婚快乐吉祥如意撒花～
# 拓展
- IE 的标签页卡片
p {
width: 100%;
height: 50%;
background: lightgreen;
border-radius: 25% 25% 0 0 / 50% 50% 0 0;
}
- google 的标签页卡片
对不起，实现不了，为什么？你咋又辣么多问题呢！
因为border-radius是实现圆角的属性，无法实现梯形绝对角度效果，这里补充一下怎么实现梯形
p {
height: 0;
width: 100px;
border-bottom: 50px solid lightgreen;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
- 对角圆角
p {
width: 100%;
height: 50%;
background: lightgreen;
border-radius: 100% 50%/ 0 100%;
}
- 一片叶子
p {
width: 100%;
height: 50%;
background: lightgreen;
border-radius: 0 100% / 0 100%;
}
# 推荐一个测试网页
来自张鑫旭大牛的测试工具 圆角效果测试
# 后语
利用border-radius的八个值进行调节，还能得到很多的漂亮的图形，如果有兴趣，欢迎交流一起进步。另外，我的下一篇文章【利用简单的css实现各种漂亮的形状】，如果觉得我的写作对您有帮助，欢迎关注哦。
