用css画笑脸

àì夳堔傛蜴生んèń 2021-09-16 21:56 390阅读 0赞

看到一篇关于画笑脸的博客，感觉很有意思，但美中不足的是写的不够清楚。。。

**【一】原文章来自：**

[https://blog.csdn.net/zwq123w/article/details/78543240][https_blog.csdn.net_zwq123w_article_details_78543240]

**【二】源代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .radius{
                height:400px;
                width:400px;
                border:3px solid black;
                border-radius:50%;
                position:absolute;
                left:50%;
                top:50%;
                margin-top:-203px;
                margin-left:-203px;
            }
            .radius1{
                height:80px;
                width:100px;
                border:3px solid black;
                border-radius:50%;
                position:absolute;
                left:70px;
                top:70px;
            }
            .radius2{
                height:80px;
                width:100px;
                border:3px solid black;
                border-radius:50%;
                position:absolute;
                right:70px;
                top:70px;
            }
            .radius3{
                height:80px;
                width:100px;
                border:3px solid black;
                border-radius:50%;
                position:absolute;
                right:150px;
                bottom:60px;
            }
            .son{
                height:0;
                width:0;
                border-top:50px solid white;
                border-left:40px solid white;
                border-right:40px solid white;
                border-bottom:70px solid black;
                margin:130px auto;
                position:absolute;
                left:155px;
            }
            .son1{
                height:230px;
                width:260px;
                background:white;
                position:absolute;
                bottom:80px;
                left:70px;
            }
    
        </style>
    </head>
    <body>
    
    <div class="radius">
        <div class="radius1"></div>
        <div class="radius2"></div>
        <div class="radius3"></div>
        <div class="son1"></div>
        <div class="son"></div>
    </div>
    </body>
    </html>

**【三】笑脸输出：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70][]

**【四】本文重点解析：**

**border-radius使用：**border-radius的数值有三种表示方法：px、%、em

具体介绍：[https://www.cnblogs.com/happymental/p/7891725.html][https_www.cnblogs.com_happymental_p_7891725.html]

**position参数：**  
          **static** : 无特殊定位，对象遵循[HTML][]定位规则  
**          absolute** : 将对象从文档流中拖出，使用[left][]，[right][left]，[top][left]，[bottom][left]等属性进行绝对定位。而其层叠通过[css z-index][]属性定义。此时对象不具有边距，但仍有补白和边框  
**          relative** :对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置  
**          position说明：**设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确

[https_blog.csdn.net_zwq123w_article_details_78543240]: https://blog.csdn.net/zwq123w/article/details/78543240
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70]: /images/20210811/2f5829729a6f4b069568fa64fbb0338f.png
[https_www.cnblogs.com_happymental_p_7891725.html]: https://www.cnblogs.com/happymental/p/7891725.html
[HTML]: http://www.divcss5.com/html/
[left]: http://www.divcss5.com/rumen/r403.shtml
[css z-index]: http://www.divcss5.com/rumen/r402.shtml