我用 CSS 画了一只可爱的小青蛙
我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！
看上图中的小青蛙，你会发现它的构成很简单，主要是由圆圈组成。显然，我们需要使用的是 边界半径 属性，我在上一篇文章中已经详细解释过这个属性，这里就不多说了。然后因为它是由很多元素组成的，所以我们需要完全控制每个元素的位置，所以我们使用绝对定位。下面我们总结一下 位置 属性（有关解释，请参阅 MDN）。
位置 属性用于指定文档中的元素 上右下 和 剩下 该属性确定元素的最终位置。
价值
静止的- 该关键字指定元素使用正常的布局行为，即元素在文档规则流中的当前布局位置。此时
最佳,正确的,底部,剩下和z-index属性无效。 相对的- 在这个关键字下，先将元素放置在不添加定位时的位置，然后在不改变页面布局的情况下调整元素位置（所以不添加定位时元素所在的位置会留一个空白）。 position:relative 对 table-*-group、table-row、table-column、table-cell、table-caption 元素没有影响。通常与
绝对配合使用 绝对- 元素会被移出正常的文档流，并且不为元素保留空间，即不设置left、right、bottom、top等位置信息时，后面的元素会占据元素的位置，该元素将直接浮动在下一个元素上。上面，元素位置是通过指定元素相对于最近的非静态定位祖先元素的偏移量来确定的。绝对定位的元素可以有不与其他边距合并的边距。除了定位，这个属性还可以和
变换：翻译（-50%，-50%）达到水平和垂直居中的效果。 固定的- 元素被移出正常的文档流，并且没有为元素保留空间。相反，元素的位置是通过指定其相对于屏幕视口的位置来指定的。元素的位置不会随着屏幕滚动而改变。打印时，元素出现在每页的固定位置。
固定的属性创建新的堆叠上下文。当元素的祖先转换,看法或者筛选属性不没有任何，容器从视口更改为这个祖先。 黏- position:relative 和 position:fixed 的组合——当元素在屏幕上时，它是相对的，当它要滚出显示屏幕时它是固定的。导航跟随定位效果（天花板效果）。需要注意的是，设置了该属性的元素的父元素不能设置为固定高度，也不能设置为overflow:visible以外的任何值，否则不起作用。
- 总结：小青蛙本身的画法并不难。重要的是要小心和耐心，因为每个位置都需要自己慢慢调整。做的时候直接打开开发者工具，然后慢慢调整left和top的值，直到形状出来。
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/1213/8003/1229
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
