世界杯进行中，别忘了学习CSS（你得想办法赶上一波热潮）。比如，用CSS画一个足球场？乍一看，CSS足球场只有圆形和矩形。不借助其他标签（包括伪元素），很容易想到渐变。让我们看看如何绘制它们。有很多渐变Tips~Tips：文中带“??”的描述属于足球小知识，不感兴趣的可以跳过，与CSS无关。一、场地的尺寸设计首先，我们来看看足球场的结构。下面是网上找的设计图。球场设计主要有以下几个部分：整体为长方形，边线和底线，长度为109-131码（90-120m），宽度为49-98码（45-90m）。中线贯穿场地。开球点，位于中线的中央。中圈是以开球点为半径为10码（9.15m）的圆圈。禁区（大禁区）长44码（40.3m），宽18码（16.5m）。球门区（小罚球区）长20码（18.3m），宽6码（5.5m）。球门长8码（7.32米）。罚球点（penaltyspot），距球门12码（11m）。罚球弧线（禁区弧线），以罚球点为中心，半径为10码（9.15m）。角区是以4个角为圆心，半径为1m的1/4弧形。??现代足球起源于英国。当时英国的长度单位是“码”，1码等于0.9144米，约合0.915米。然后，将英制长度10码转换为公制长度9.15米。这就是9.15米的由来。2、边线和底线以世界杯场地为例，长为115码（105m），宽为74码（68m）。??2022年世界杯决赛将在由中国铁建国际集团承建的卢赛尔体育场举行。假设HTML结构如下，这里只用了一个标签。为了尺寸计算方便，使用em的相对单位进行换算，取值可以使用真正的“编码”。优点是都是整数。简单画出外围边缘和底线，如下：filed{font-size:5px;宽度：115em；/*表示115码*/height:74em;边框：5em实心透明；outline:2pxsolid#fff;/*固定线宽*/outline-offset:-5em;background:#43A63C;}注意这里实现的小细节：这里的外线框是用outline实现的，并且预留了一个5em的透明边框，因为背景的位置和大小百分比是根据内容区域计算的,和边框不包括在内。例如background-position:00表示线框内的左上点，background-position:100%100%表示线框内的右下点，background-size:100%表示线框内的最大尺寸如下：透明边框的好处还有一个好处，透明边框仍然可以画出背景，比如可以在边框外画出深浅不一的草，后面会讲到。准备工作完成，下面是具体的绘制过程。3、在绘制中心线、开球点和中心圆之前，可以通过css变量简单规划分离各部分，这样看起来更清晰，例如：filed{--centerline:xxx;--centercircle起点：xxx；...background:/*越靠前，背景越高*/var(--middleline),var(--middlecirclekick-offpoint),...,#43A63C}这个技巧有一个上一篇文章相关介绍：transform被占用引起的思考
