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

效果图

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;
        }

<div class="board">
    <div class="android">
        <div class="corner"></div>
        <div class="head"></div>
        <div class="body"></div>
        <div class="arms"></div>
    </div>
</div>

分步骤实现机器人

画下犄角

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)
        }

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

头部

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;
        }