css 笑脸（定位使用父相子绝）

最新推荐文章于 2022-05-30 10:47:17 发布

崔秀静

最新推荐文章于 2022-05-30 10:47:17 发布

阅读量174

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_44735906/article/details/105011234

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang-"zh-cn">
<head>
<meta charset-"UTF-8" >
<title>cui</title>
<style>
    body{
        padding:0;
        margin:0;
    }
    .wrap{
        position:relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin:100px auto;
        background-color:rgb(161, 18, 42);
    }
    .wrap .box1,.box2{
        width: 50px;
        height: 50px;
        border-radius:50%;
    }
    .wrap .box1{
        position:absolute;
        left:24px;
        top:30px;
        background:radial-gradient(brown 0%,black 30%,#fff 40%);
    }
    .wrap .box2{
        position:absolute;
        left:100px;
        top:30px;
        background:radial-gradient(brown 0%,black 30%,#fff 40%);
    }
    .wrap .box3{
        position:absolute;
        left:30px;
        top:130px;
        width: 110px;
        height: 40px;
        border-radius:0 0 65px 65px/ 0 0 65px 65px;
        background-color:rgba(254,0,0,.5);
    }
</style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

崔秀静

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 笑脸（定位使用父相子绝）

<!DOCTYPE HTML><html lang-"zh-cn"><head><meta charset-"UTF-8" ><title>cui</title><style> body{ padding:0; margin:0; } .wrap{...
复制链接

扫一扫