社区精选｜万能的 CSS 渐变！单标签绘制一个足球场
业界
作者：SegmentFault
2022-12-20 13:41:38
阅读：859
今天小编为大家带来的是社区作者 XboxYan 的文章，让我们一起来绘制一个足球场。
世界杯圆满结束，也不要忘记学习 CSS。比如，用 CSS 绘制一个足球场？一眼望去，这里的形状只有圆形和矩形，在不借助其他标签的情况下（包括伪元素），其实很容易联想到渐变，一起看看如何绘制的吧，有非常多的渐变小技巧~温馨提示：文章中带有“⚽️”的描述属于足球小知识，不感兴趣的可以跳过，与 CSS 无关
首先来看一下足球场的构造，下面是在网上找到的一张设计图- 整体是矩形，边线和底线，长度是 109~131 码（ 90~120 m ），宽度是 49-98 码（ 45~90 m）
- 中圈，以开球点为圆形，半径为 10 码（ 9.15m ）圆
- 罚球区（大禁区），长度是44码（ 40.3m ），宽度是 18 码（ 16.5m ）
- 球门区（小禁区），长度是20码（ 18.3m ），宽度是6码（ 5.5m ）
- 罚球点（点球点），距离球门 12 码（ 11m ）
- 罚球弧（禁区弧），以罚球点为圆心，半径为 10 码（ 9.15m ）的圆弧
- 角球区，以 4 个角为圆心，半径为 1m的 1/4 圆弧
⚽️现代足球运动起源于英国，当时英制的长度单位是“码”，1码等于0.9144米，约 0.915 米。那么，英制长度 10 码换算成公制长度就是9.15米。这就是9.15米的来源。
以世界杯比赛场地为例，长度 115 码（ 105m ），宽度 74 码（ 68m ）。⚽️ 2022 世界杯决赛在卢赛尔球场举行，它由中国铁建国际集团承建假设 HTML 结构如下，这里用到的标签仅仅只有一个<filed></filed>
为了尺寸计算方便，采用 em 相对单位进行换算，数值就可以采用真实的“码”，好处是都是整数，简单绘制一下外围边线和底线，如下filed{
font-size: 5px;
width: 115em; /*表示115码*/
height: 74em;
border: 5em solid transparent;
outline: 2px solid #fff;/*线宽就用固定值*/
outline-offset: -5em;
background: #43A63C;
}
注意这里实现的小细节：这里外层的线框是通过 outline 实现的，还预留了一个 5em 的透明边框，这是因为背景的位置和尺寸百分比计算是根据内容区域的，并不包含边框。比如，background-postion:0 0 表示的就是线框内的左上点，background-postion: 100% 100% 表示的就是线框内的右下点，background-size: 100% 表示的就是线框内最大尺寸，如下还有一个好处，透明边框仍然是可以绘制背景的，比如深浅不同的草皮就可以绘制在边框之外，这个后面再说。
在绘制之前，可以简单规划一下，通过 CSS 变量将各部分分离开来，这样看起来会更加清晰，例如filed{
--中线: xxx;
--中圈开球点: xxx;
...
background:
/*越靠前的背景越靠上*/
var(--中线),
var(--中圈开球点),
...,
#43A63C
}
这个技巧在之前这篇文章中有相关介绍：由 transform 被占用引发的思考
*文章为作者独立观点，不代表 免费SSL 立场
原文链接 https://www.51uos.com/news/industry/5788.html
