Web 利用纯html和css画出一个android机器人

最新推荐文章于 2026-05-26 15:14:16 发布

原创

最新推荐文章于 2026-05-26 15:14:16 发布 · 1.5k 阅读

收录于

当前文章被以下社区和专栏收录：

该博客通过一个实例项目展示了如何利用纯HTML和CSS3技术来创建一个Android机器人的图形效果，旨在帮助读者更好地理解和掌握border-radius属性在实现圆角边框方面的应用。

Android机器人

这个小项目是为了熟悉border-radius 圆角边框

参考文档

border-radius

源代码

<style>
    .robot{
        width: 500px;
        height: 550px;
        border: 1px solid red;
        margin: 30px auto;
        position: relative;
    }
    .robot .head{
        width: 250px;
        height: 125px;
        border-top-left-radius: 125px;
        border-top-right-radius: 125px;
        background-color: #4cae4c;
        margin: 10px auto;
        position: relative;
    }
    .robot .eyes{
        width: 25px;
        height: 25px;
        border-radius: 25px;
        position: absolute;
        background-color: white;
    }
    .robot .eyes-lef

标签