使用CSS3伪类和圆角实现安卓图标

最新推荐文章于 2022-11-18 13:42:06 发布

rufeike

最新推荐文章于 2022-11-18 13:42:06 发布

阅读量534

点赞数

分类专栏：前端小案例文章标签： css3 伪类

本文链接：https://blog.csdn.net/rufeike/article/details/102674468

版权

前端小案例专栏收录该内容

9 篇文章 2 订阅

订阅专栏

使用CSS3伪类和圆角实现安卓图标

效果图

在这里插入图片描述

知识点

伪类E::before和E::after
圆角border-radius

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon_box{width:300px;height: 300px;margin:0 auto;border:1px solid #ececec;padding:10px;}
        .an_header{position:relative;width:100px;height: 50px;margin:0 auto;background-color: darkgreen;border-radius: 100px 100px 0 0;margin-bottom: 5px;}
        .an_header::before,.an_header::after{
            content:'';
            background-color: #ffffff;
            position: absolute;
            top:25px;
            width:10px;
            height: 10px;
            border-radius: 50%;
        }
        .an_header::before{left:26px;}
        .an_header::after{right:26px;}
        .an_body{position:relative;width:100px;height: 100px;background-color: darkgreen;margin:0px auto;border-radius: 0 0 10px 10px;}
        .an_body::before,.an_body::after{
            content:'';
            position: absolute;
            width:15px;
            height: 70px;
            top:10px;
            background: darkgreen;
            border-radius: 5px;
        }
        .an_body::before{left:-20px}
        .an_body::after{right:-20px}
        .an_footer{position:relative;width:100px;height: 100px;background-color: #ffffff;margin:0px auto;border-radius: 0 0 10px 10px;}
        .an_footer::before,.an_footer::after{
            content:'';
            position: absolute;
            width:15px;
            height: 70px;
            background: darkgreen;
            border-radius:0px 0px 5px 5px;
        }
        .an_footer::before{left:20px}
        .an_footer::after{right:20px}
    </style>
</head>
<body>
    <main>
        <div class="icon_box">
            <div class="an_header"></div>
            <div class="an_body"></div>
            <div class="an_footer"></div>
        </div>
    </main>
</body>
</html>

rufeike

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3伪类和圆角实现安卓图标

使用CSS3伪类和圆角实现安卓图标效果图知识点伪类E::before和E::after圆角border-radius代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> ...
复制链接

扫一扫

专栏目录