安卓机器人——使用圆角和伪元素

作者: 珲_cysky2018 | 来源:发表于2018-08-25 11:17 被阅读0次

安卓机器人——使用圆角和伪元素
细说CSS伪类和伪元素
伪类和伪元素初探
CSS伪类和伪元素
CSS基础之伪类伪元素&样式优先权
CSS横向立体菜单栏
安卓开发开发前你需要了解的一些资料(一)
Android学习-创建圆角的DialogActivity
18、毛玻璃效果
javascript 伪元素的点击事件

样式如下：

安卓机器人.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #ccc;
        }
        .content{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto 0;
        }
        .header{
            width: 250px;
            height: 125px;
            border-radius: 125px 125px 0 0;
            margin: 10px auto;
            background-color: darkgreen;
            position: relative;
        }
        .header::before,.header::after{
            content:"";
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            top:60px;
            background-color: #fff;
            border-radius: 50%;
        }
        .header::before{
            left: 60px;
        }
        .header::after{
            right: 60px;
        }
        .body{
            width: 250px;
            height: 250px;
            background-color: darkgreen;
            border-radius: 0 0 20px 20px;
            margin:0 auto;
            position: relative;
        }
        .body::before,.body::after{
            content: '';
            display: block;
            width: 30px;
            height: 180px;
            border-radius: 8px;
            background-color: darkgreen;
            position: absolute;
            top: 20px;
        }
        .body::before{
            left: -40px;
        }
        .body::after{
            right: -40px;
        }
        .footer{
            width: 250px;
            height: 100px;
            margin: 0 auto;
            position: relative;
        }
        .footer::before,.footer:after{
            content: '';
            display: block;
            width: 30px;
            height: 90px;
            background-color: darkgreen;
            position: absolute;
            top: 0;
            border-radius: 0 0 10px 10px;
        }
        .footer::before{
            left: 50px;
        }
        .footer:after{
            right:50px;
        }


    </style>
</head>
<body>
<div class="content">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>
</body>
</html>