我用CSS画了一只可爱的小青蛙

大家好，我是小七月，今天我使用CSS绘制了一个Q版的小青蛙，下面来看看我是怎么实现的吧。 项目地址：

看上图的小青蛙，会发现它其实构图很简单，主要是由圆来构成，很显然，我们需要使用到的是border-raduis属性，这个属性我在上一篇文章有详细讲解过，此处就不再多说。然后因为是由很多个元素拼凑出来的，我们需要完全控制每一个元素的位置，所以我们使用到的是绝对定位。下面我们来总结一下关于position的属性（解释参考MDN）。

position属性用于指定一个元素在文档中top``right``bottom和left属性则决定了该元素的最终位置。

取值

• static

  该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

• relative

  该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。通常与absolute搭配使用

• absolute

  元素会被移出正常文档流，并不为元素预留空间，即当不设置left,right,bottom,top等位置信息时，后面的元素会占据该元素的位置，该元素直接漂浮在后来元素的上面，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。该属性除了用于定位，也可以搭配transform: translate(-50%,-50%)来实现水平垂直居中效果。

• fixed

  元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

• sticky

  position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。导航的跟随定位效果(吸顶效果)。需要注意的是设置了该属性的元素的父元素不能设置固定高度，也不能设置除了overflow:visible以外的任何值，否则没有效果。

  总结：关于小青蛙的绘制，本身不难，重要的是在于细心和耐心，因为每个位置都需要自己慢慢的调整，我在做的时候直接打开开发者工具，然后慢慢调整关于left和top的值，直到形状出来了为止。