关于border-radius

今天才知道，border-radius是可以设置两个值的，

CSS属性 border-radius 用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。

于是，我用这个特性画了一个鹰嘴：

FireShot Capture 1 - An Anonymous Pen on CodePen - https___codepen.io_anon_pen_PeajdG.png

HTML

CSS

.hook{
  width:100px;
  height:100px;
  background:#fff;
  border-top:40px solid #000;
  border-right:0;
  border-bottom:0;
  border-left:00px solid #000;
  border-bottom-color:#ff0;
  border-top-left-radius:80px 60px; /*两个参数，一个纵向半径一个横向半径*/
}

而有了这个鹰嘴后，我们就能画出如下图标了：

FireShot Capture 2 - 一件趣事——用CSS绘制图标.mp4，重拾CSS的乐趣教程-慕课网 - https___www.imooc.com_video_11619.png

MOOC网视频地址：https://www.imooc.com/video/11619