border——radius篇

border-radius的出现让我们实现圆角效果提供了极大的便利，我们还可以通过对Border-radius特性的进一步研究来实现各种图形效果，接下来就让我们看看它的威力吧！

程序员必读

Css3：box-shadow高级应用

1.制作自适应的椭圆

知识点:border-radius: a / b;    //a,b分别为圆角的水平、垂直半径,单位若为%,则表示相对于宽度和高度进行解析

• 核心代码

border-radius: 50% /10%;
border-radius: 20px 20px 100%;
border-radius: 20% 50%;

3.纯css3实现饼图进度动画

知识点：border-radius: a b c d / e f g h; animation多动画属性;

• 核心代码

.br-31{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right,#f6c 50%,#333 0);
}
.br-31::before{
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #f6c;
  transform-origin: left;
  animation: skin 4s linear infinite,
             bg 8s step-end infinite;
}
@keyframes skin{
  to{
    transform: rotate(.5turn);
  }
}
@keyframes bg{
  50%{
    background: #333;
  }
}