利用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;

属性值	解释
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：https://github.com/JealynWang/playground

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

猜你喜欢