用css代码编写足球场

1、创建足球场结构：

这里有几个函数都是画线的类名：

halfway-line：中场线；

center-circle：中圈线；

center-spoe ：中点线；等画足球场的线。

2、既然要做出好看的足球场，当然要定位足球场，将足球场置于整个页面的中间部分，所以要用到position：absolute（绝对定位）；和position：relative（相对定位），这个对于初学者可能要慢慢体会。

如图：

3、做出一个足球场当然需要一些素材了，所以在网上找到一些，足球场的草皮或草坪的图片放置在桌面上，然后重命名为（***.jpg或其他格式的图片），不考虑图片大小，我们可以用repeat平铺，然后根据下图来置入图片。

如图：

4、然后就是一个制作弧形的方法，下面有一段代码，大家可以参考下，通过overflow：hidden来实现。

如图：

5、最后通过不断调试、修改，在浏览器中运行，最后结果如图所以：