利用CSS3绘制一个简单的操场

操场"/>

利用CSS3绘制一个简单的操场

一、前言

伴随着CSS3（CSS Module 3）的发布，我们设计网页时有了更多的选择。对于一些比较简单的小图标和图片，我们可以利用CSS3很方便的进行绘制，从而减少页面的图片数量，增加了网页的访问速度。今天我主要利用CSS3的几个属性，简单的绘制一个操场。我用到的核心属性为：

• border-radius
• box-shadow
• before 和 after 伪元素

二、三个关键属性的解析

1.border-radius

border-radius属性是用来为元素添加圆角边框的。其用法如下：

border-radius: 1-4 length|% / 1-4 length|%;

“/”前面的值表示水平方向的半径，“/”后面的值表示竖直方向的半径。若省略，则水平方向与垂直方向半径相等。下面是其典型应用场景：绘制圆形。

div{width: 50px;height: 50px;border-radius:50%;border:1px solid;
}

只要将某元素（块级显示元素）的 width 和 height 值设置成一样，然后利用 border-radius:50% 就可以绘制出一个圆形。

2.box-shadow

box-shadow属性是用来设置盒阴影的，其用法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow属性是一个用逗号分隔阴影的列表，可用逗号分隔多个 box-shadow属性 ，以实现效果的叠加。

3.before 和 after 伪元素

::before和::after是CSS3中新增的伪元素，所谓伪元素，就是这些元素不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。

三、案例实现

1.HTML代码如下：

<!--操场区域-->
<div class="playground"><!--操场核心区域--><div class="central_area"><!--足球场区域，分为左半部分和右半部分--><div class="football_field"><div class="football_field_left"></div><div class="football_field_right"></div><!--中心圆圈区域--><div class="central_circle"></div></div></div></div>

HTML结构较为简单，不再进行解析。

2.CSS代码分解：

2.1 首先设定操场区域的宽高

.playground{width: 800px;height: 400px;border:1px dotted black;
}

2.2 设置操场核心区域，绘制出环形跑道

.central_area{width: 500px;height:200px;/*水平方向居中显示*/margin: 100px auto;background:#6F9B3A;/*关键代码，将操场变换为椭圆形*/border-radius:200px;/*关键代码，设置多层环形跑道*/box-shadow: 0 0 0 10px #E65868,0 0 0 11px #eee,0 0 0 20px #E65868,0 0 0 21px #eee,0 0 0 30px #E65868,0 0 0 31px #eee,0 0 0 40px #E65868;
}

该部分代码中的后两行代码是整个案例的最核心代码。通过 border-radius 将操场区域变换为椭圆，通过 box-shadow 属性的多层叠加，可以实现多个跑道的绘制。border-radius属性能改变主题内容的显示，而 box-shadow 会根据主体内容的形状变化而变换，两者的综合应用，是绘制操场的关键。

2.3 足球场区域绘制

.football_field{width:350px;height:188px;border:2px solid #fff;position: relative;top: 4px;left:75px;
}

2.4 足球场左右半边区域绘制（以左边为例）

.football_field_left{width:175px;height:188px;border-right:2px solid #fff;
}
/*绘制左侧球门*/
.football_field_left::before{content: '';width: 20px;height: 60px;position: absolute;top:64px;border:2px solid #fff;border-left:none;
}
/*绘制左侧球门框*/
.football_field_left::after{content: '';width: 50px;height: 120px;position: absolute;top:34px;border:2px solid #fff;border-left:none;
}

2.5 绘制足球场中心圈

.central_circle{width:50px;height:50px;border:1px solid #fff;/*设置为圆形*/border-radius:50%;/*居中显示*/position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

四、最终效果

该案例最终效果如下图所示：

欲查看完整代码，请移步我的github：