CSS深度挖掘 - 「Border-radius」的八个值

知识往往随时间淡忘，沉心在开发中时间长了，发现好些知识已经又模糊了，一些很好用的属性，其本身就有，却忘了，然后绕个大圈子自己实现了一套，究其原因，还是因为一开始没有掌握牢固和透彻

# 都知道是圆角

  border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。他用于向 block 级别元素增加圆角

语法

border-radius: 1-4 length|% / 1-4 length|%;

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-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</