效果图
- 上百度找了个图片,实现大概这样一个效果,一看就是被绿过得机器人…只要锄头使的好,没有代码挖不到。顺便我们对它的结构先进行分析
- 实现方法有很多种,可以构造自己的结构。也可以使用定位来布局…
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>
分步骤实现机器人
画下犄角
- 使用伪元素来实现犄角(就是一个选择的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)
}
- 公共的样式进行抽离,减少代码的冗余
头部
- 头部实际上一个半圆形的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;
}
实现身体和脚
- 使用定位来操作身体的位置
- 头部左下角和右下角记得使用圆角
- 双脚使用伪元素实现
.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;
}
实现胳膊
- 胳膊使用定位
.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;
}