伴随着 CSS3(CSS Module 3)的发布，我们设计网页时有了更多的选择。对于一些比较简单的小图标和图片，我们可以利用 CSS3 很方便的进行绘制，从而减少页面的图片数量和HTTP请求次数，加快网页的访问速度。

今天我们主要利用 CSS3 的几个属性，简单的绘制一个如下图所示的操场：

其中用到的核心属性为：

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

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%;就可以绘制出一个圆形。

box-shadow

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

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

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

before 和 after 伪元素

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

::before和::after必须配合content属性来使用，content用来定义插入的内容，必须显示声明content属性，哪怕是空字符串。

案例实现

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 结构较为简单，就不再解析了。

操场容器绘制

首先设定操场区域的宽高

.playground{    width: 800px;    height: 400px;}

跑道绘制

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

.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会根据主体内容的形状变化而变换，两者的综合应用，是绘制操场的关键。

足球场区域绘制

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

球门区域绘制

足球场左右半边区域绘制(以左边为例)

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

中心圈绘制

绘制足球场中心圈

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

最终效果

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

关于我

如果觉得本文还不错，希望大家分享、点赞，本公众号前端快爆会定期为您推送最新技术文章，全都是硬菜干货~~

本文到此结束，感谢您的阅读，我们下篇文章见。

关注前端快爆

获取更多精彩

前端快爆

点下"在看"，你最好看