CSS---足球场的实现，纪念2022世界杯(:root的使用)

首先这里说明下，该博文主要能看到使用的知识点：

1. :root 2. box-reflect

关于:root的使用说明：

:root是CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同除了 IE8 及更早的版本。在:root中声明相当于全局属性，
只要当前页面引用了:root segment所在文件，都可以使用var()来引用。

var()函数说明：

var() 方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。
如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

box-reflect属性说明

box-reflect 属性用于创建图像反射。box-reflect 属性的值可以是：below、above、left 或 right

:root {--blue: #007bff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--red: #dc3545;--orange: #fd7e14;--yellow: #ffc107;--green: #28a745;--teal: #20c997;--cyan: #17a2b8;--white: #fff;--gray: #6c757d;--gray-dark: #343a40;--primary: #007bff;--secondary: #6c757d;--success: #28a745;--info: #17a2b8;--warning: #ffc107;--danger: #dc3545;--light: #f8f9fa;--dark: #343a40;--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--breakpoint-xxl: 1600px;--font-family-sans-serif: -apple-system, BlinkMacSystemFont;--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;--lineColor: #fff;--fieldWidth: 210px;--fieldHeight: 136px;--centerCircle: 18px;--cornerCircle: 4px;--grandForbiddenAreaWidth: 32px;--grandForbiddenAreaHeight: 80px;--smallRestrictedAreaWidth: 11px;--smallRestrictedAreaHeight: 36px;--goalWidth: 4px;--goalHeight: 14px;
}

足球场——第一种采用 :root

场地：长105米，宽68米；
球门：长7.32米，高2.44米；
大禁区（罚球区）：长40.32米，宽16.5米；
小禁区（球门区）：长18.32米，宽5.5米
中圈区：半径9.15米；
角球去：半径1米；
罚球弧：半径9.15的半圆根据实际值做些调整，将其数据x2后作为像素值，小数做适当调整为整数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>:root {--lineColor: #333;--fieldWidth: 210px;--fieldHeight: 136px;--centerCircle: 18px;--cornerCircle: 4px;--grandForbiddenAreaWidth: 32px;--grandForbiddenAreaHeight: 80px;--smallRestrictedAreaWidth: 11px;--smallRestrictedAreaHeight: 36px;--goalWidth: 4px;--goalHeight: 14px;}div {width: calc(var(--fieldWidth) / 2);height: var(--fieldHeight);position: relative;left: calc(var(--fieldWidth) / 2 * -1);transform: scale(1.6);border: 2px solid var(--lineColor);-webkit-box-reflect: right -1px;background:radial-gradient(circle, #3330 var(--centerCircle) 0, var(--lineColor) calc(var(--centerCircle)), var(--lineColor) calc(var(--centerCircle) + 2px), #3330 calc(var(--centerCircle) + 2px)) no-repeat calc(var(--fieldWidth) / 4) 50% / 100% 100%,radial-gradient(circle,#3330 var(--cornerCircle),var(--lineColor) calc(var(--cornerCircle)),var(--lineColor) calc(var(--cornerCircle) + 2px),#3330 calc(var(--cornerCircle) + 2px)) no-repeat calc(var(--fieldWidth) / 4 * -1) calc(var(--fieldHeight) / 2 * -1) / 100%,radial-gradient(circle,#3330 var(--cornerCircle),var(--lineColor) calc(var(--cornerCircle)),var(--lineColor) calc(var(--cornerCircle) + 2px),#3330 calc(var(--cornerCircle) + 2px)) no-repeat calc(var(--fieldWidth) / 4 * -1) calc(var(--fieldHeight) / 2) / 100%,conic-gradient(from -90deg at right 2px bottom 2px,rgba(31, 157, 161, 0) 0 90deg, #333 0) 0 calc((var(--fieldHeight) - var(--grandForbiddenAreaHeight)) / 2)/var(--grandForbiddenAreaWidth) var(--grandForbiddenAreaHeight) no-repeat,linear-gradient(0deg,var(--lineColor) 2px,#3330 2px) 0px calc((var(--fieldHeight) - var(--grandForbiddenAreaHeight)) / 2)/var(--grandForbiddenAreaWidth) 2px no-repeat,conic-gradient(from -90deg at right 2px bottom 2px,rgba(31, 157, 161, 0) 0 90deg, #333 0) 0 calc((var(--fieldHeight) - var(--smallRestrictedAreaHeight)) / 2)/var(--smallRestrictedAreaWidth) var(--smallRestrictedAreaHeight) no-repeat,linear-gradient(0deg,var(--lineColor) 2px,#3330 2px) 0px calc((var(--fieldHeight) - var(--smallRestrictedAreaHeight)) / 2)/var(--smallRestrictedAreaWidth) 2px no-repeat,repeating-linear-gradient(90deg,#56a224 0px, #56a224 10px, #a9da27 10px, #a9da27 20px);}div::after {content: '';display: block;position: absolute;width: 40px;height: 40px;border: 2px solid #333;top: calc(var(--fieldHeight) / 2 - 22px);border-radius: 50%;left: calc(var(--grandForbiddenAreaWidth) - 38px);background: #3330;border-top-color: #3330;border-left-color: #3330;border-bottom-color: #3330;}div::before {content: '';display: block;position: absolute;width: var(--goalWidth);height: var(--goalHeight);top: calc((var(--fieldHeight) - var(--goalHeight))/ 2);left: 0;background: #333;}body {background-color: #4a9716;display: flex;justify-content: center;align-items: center;height: 100vh;}</style>
</head><body><div></div>
</body></html>

效果如下：

第二种采用组合式的样式，直接写样式：

改组代码，未采用镜像属性：box-reflect

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>filed {font-size: 5px;width: 115em;height: 74em;--中线: linear-gradient(#333, #333) center/2px 100% no-repeat;--中圈: radial-gradient(closest-side circle, #333 2px, transparent 0 calc(100% - 2px), #333 0 100%, transparent 0) center/20em 20em no-repeat;--大禁区: linear-gradient(to right, #43A63C calc(18em - 2px), transparent 0) 0 center/calc(100% - 18em + 2px) calc(44em - 4px) repeat-x, linear-gradient(to right, #333 18em, transparent 0) 0 center/calc(100% - 18em) 44em repeat-x;--小禁区: linear-gradient(to right, #43A63C calc(6em - 2px), transparent 0) 0 center/calc(100% - 6em + 2px) calc(20em - 4px) repeat-x, linear-gradient(to right, #333 6em, transparent 0) 0 center/calc(100% - 6em) 20em repeat-x;--球门: linear-gradient(to right, #43A63C calc(3em - 4px), transparent 0) calc(-3em + 2px) center/calc(100% + 3em) calc(8em - 4px) repeat-x, linear-gradient(to right, #333 3em, transparent 0) -3em center/calc(100% + 3em) 8em repeat-x;--罚球弧: radial-gradient(circle at 12em center, transparent calc(10em - 2px), #333 0 10em, transparent 0) 0 center/calc(100% - 24em) 100%;--罚球点: radial-gradient(circle at 12em center, #333 2px, transparent 0) 0 center/calc(100% - 24em) 100%;--角球弧: radial-gradient(circle at 1em 1em, transparent calc(1em - 2px), #333 0 1em, transparent 0) -1em -1em/100% 100% content-box;--草坪: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, .5) 0% 100%) center/10% 100%;background:var(--草坪),var(--角球弧),var(--罚球点),var(--球门),var(--小禁区),var(--大禁区),var(--罚球弧),var(--中线),var(--中圈),#43A63C;background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;border: 5em solid transparent;outline: 2px solid #333;outline-offset: -5em;}* {margin: 0;padding: 0}body {background-color: #4a9716;display: flex;justify-content: center;align-items: center;height: 100vh;}</style>
</head><body><filed></filed>
</body></html>

效果图如下：

CSS---足球场的实现，纪念2022世界杯(:root的使用)相关推荐

小米电视怎么看cctv？安装电视家教你锁定2022世界杯“观赛位”
进入11月,接下来最火热的话题必属2022世界杯,早早老伙计就跑来问了我一个问题,说他不知道用小米电视怎么看CCTV.因为他家电视刚买不久,不懂捣鼓,也不知道小米电视在哪能看比赛,我也只能给他科普科普 ...
观世界赛事，品足球人生--2022世界杯
观世界赛事,品足球人生 – 2022世界杯 1.卡塔尔世界杯百科 2022年卡塔尔世界杯(英语:FIFA World Cup Qatar 2022)是第二十二届世界杯足球赛,是历史上首次在卡塔尔和 ...
2022世界杯回忆录：我的青春我的歌
前言 2022世界杯硝烟散尽,12月19号凌晨,阿根廷夺冠后,我如释重负地倒头睡了.醒来后一直想写点文字,这是我一直以来的习惯.我知道,在地球的另一端,在那个正处在夏天的南美大陆,和北京的数九寒冬完全 ...
Python！使用机器学习预测2022世界杯
使用机器学习预测2022世界杯文章目录使用机器学习预测2022世界杯项目说明数据集说明 1872年至2022年国际足球成绩国际足联世界排名1992-2022 数据分析及预处理对1872年至 ...
“2022世界杯预测帝”富而喜悦网络走红！网友直呼预测属你神！
2022卡塔尔世界杯小组赛已结束,所有比赛有了结果,或许很难有人能够预测的对.然而,谁又能10天10连中!被微博网友亲切誉为"2022世界杯预测帝"富而喜悦因为一篇发于11月28日 ...
ChatGPT 加图数据库 NebulaGraph 预测 2022 世界杯冠军球队
一次利用 ChatGPT 给出数据抓取代码,借助 NebulaGraph 图数据库与图算法预测体坛赛事的尝试. 作者:古思为蹭 ChatGPT 热度最近因为世界杯正在进行,我受到这篇 Cambri ...
[2022世界杯] 小白也可以看懂的世界杯
⚽文化世界杯如果问你全球最火,影响力最大的体育赛事是什么?那么很多人会说 "奥运会"!当然不完全对,如果从关注度来说世界杯的影响力更大! 世界杯与奥运会的不同在于:会员协会的数 ...
2022世界杯在哪个国家举办,具体日期
2022世界杯举办的国家是卡塔尔,具体举办日期将于当年11月至12月在卡塔尔举行,决赛将在卡塔尔国庆节-12月18日进行. 这是[世界杯添加链接描述直播](http://www.chdlav.com/ ...
2022世界杯结果预测，简单AI模型最有效？附代码！
2022世界杯冠军是谁?本文将为你揭晓一个利用简单AI模型得到的靠谱预测. 许多人称足球为"不可预测的比赛",因为一场足球比赛有不同的因素可以改变最终比分. 这是真的--在某种程度 ...

CSS---足球场的实现，纪念2022世界杯(:root的使用)

1. :root 2. box-reflect

关于:root的使用说明：

var()函数说明：

box-reflect属性说明

足球场——第一种采用 :root

第二种采用组合式的样式，直接写样式：

CSS---足球场的实现，纪念2022世界杯(:root的使用)相关推荐

最新文章

热门文章