好玩的CSS3（2）--圆角半径实现安卓机器人

约定不等于承诺〃 2022-02-26 00:46 197阅读 0赞

### 效果图 ###

![结构分析图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

1.  上百度找了个图片，实现大概这样一个效果，一看就是被绿过得机器人…只要锄头使的好，没有代码挖不到。顺便我们对它的结构先进行分析
2.  实现方法有很多种，可以构造自己的结构。也可以使用定位来布局…

### border-radius ###

> 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

border-radius是一个简写属性：将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。所以它值为四个的时候，也是按这四个属性顺序的值

##### 圆角半径值问题 #####

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。  
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角  
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角  
一个值： 四个圆角值相同

--------------------

**使用斜杠"/"**  
前面表示水平半径，后面表示垂直半径。在使用less和sass的时候使用它则会直接被解析，所以要使用属性分开写  
**percentage**  
使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。  
可以像margin和padding那样去理解。

### HTML结构 ###

/* 背景 */
            .board{ 
                width: 600px;
                height: 500px;
                margin: 100px auto;
    			background-color: #ccc;
            }
            /* 安卓机器人存放的盒子 */
            .android{ 
                width: 340px;
                padding-top: 10px;
                margin: 0 auto;
                position: relative;
            }
            .android>div{ 
                margin: 0 auto;
            }

### 分步骤实现机器人 ###

##### 画下犄角 #####

1.  使用伪元素来实现犄角（就是一个选择的div盒子）;伪元素记得加content,伪元素实际上可以理解为行内元素，定位可以将其转为行内块

.corner{ 
                width: 150px;
                height: 50px;
                position: relative;
            }
            .corner::before,.corner::after{ 
                content: '';
                position: absolute;
                top: 20px;
                width: 6px;
                height: 70px;
                background: #A4CA39;
                border-radius: 3px;
            }
            .corner::before{ 
                left: 0;
                transform: rotate(-35deg);
            }
            .corner::after{ 
                right: 0;
                transform: rotate(35deg)
            }

1.  公共的样式进行抽离，减少代码的冗余

##### 头部 #####

1.  头部实际上一个半圆形的div，眼睛可以使用伪类实现

.head{ 
                width: 220px;
                height: 100px;
                background: #A4CA39;
                border-radius: 110px 110px 0 0/100px 100px 0 0;
                position: relative;
            }
            /* 实现眼睛 */
            .head::before,.head::after{ 
                content: '';
    			position: absolute;
    			top: 40px;
    			width: 20px;
    			height: 20px;
    			border-radius: 10px;
    			background: #ccc;
            }
            .head::before { 
    			left: 50px;
    		}
    
    		.head::after { 
    			right: 50px;
    		}

##### 实现身体和脚 #####

1.  使用定位来操作身体的位置
2.  头部左下角和右下角记得使用圆角
3.  双脚使用伪元素实现

.body{ 
                width: 220px;
                height: 180px;
                background: #A4CA39;
                position: absolute;
                left: 60px;
                top: 170px;
                border-radius: 0 0 20px 20px;
            }
            /* 实现脚 */
            .body::before,.body::after{ 
                content: '';
                position: absolute;
                top: 180px;
                width: 50px;
                height: 80px;
                background: #A4CA39;
                border-radius: 0 0 25px 25px;
            }
            .body::before{ 
                left: 20px;
            }
            .body::after{ 
                right: 20px;
            }

##### 实现胳膊 #####

1.  胳膊使用定位

.arms{ 
                position: absolute;
                top: 170px;
                width: 340px;
                height: 150px;
            }
            .arms::before,.arms::after{ 
                content: '';
                position: absolute;
                height: 150px;
                width: 50px;
                background: #A4CA39;
                border-radius: 25px;
            }
            .arms::before{ 
                left: 0;
            }
            .arms::after{ 
                right: 0;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220226/41ec4f81cfee4a2f8659803b040146b5.png