电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

CSS單標(biāo)簽實(shí)現(xiàn)復(fù)雜的棋盤布局

瀏覽:267日期:2022-06-03 09:24:38
目錄
  • 使用漸變實(shí)現(xiàn)網(wǎng)格
  • 利用漸變實(shí)現(xiàn)交叉虛線十字
  • 借助偽元素及 box-shadow 實(shí)現(xiàn)剩余符合
  • 最后

最近,有網(wǎng)友問我,他們的一個(gè)作業(yè),盡量使用少的標(biāo)簽去實(shí)現(xiàn)這樣一個(gè)象棋布局:

他用了 60 多個(gè)標(biāo)簽,而他的同學(xué),只用了 6 個(gè),問我有沒有辦法盡可能的做到利用更少的標(biāo)簽去完成這個(gè)布局效果。

其實(shí),對(duì)于一個(gè)頁(yè)面的布局而言,標(biāo)簽越少不一定是好事,我們?cè)诳紤] DOM 的消耗的同時(shí),也需要關(guān)注代碼的可讀性,以及后續(xù)基于這個(gè)布局的制作的交互的難易性等等。

當(dāng)然,僅僅從用更少的標(biāo)簽完成這個(gè)布局的角度而言,我們能夠把標(biāo)簽數(shù)壓縮到多少呢個(gè)?(不考慮 <body><html>

答案是 1 個(gè)。

本文就嘗試使用一個(gè)標(biāo)簽完成這個(gè)效果,當(dāng)然,這僅僅是探索 CSS 的極限,不代表我推薦在實(shí)際業(yè)務(wù)中這樣去寫。

我們對(duì)整個(gè)布局進(jìn)行一下拆分,大致可以分為三部分:網(wǎng)格 + 虛線交叉十字 + 特殊符號(hào):

并且,像虛線交叉十字和特殊的符號(hào)都不止一個(gè),這里必然會(huì)有一些技巧存在。

使用漸變實(shí)現(xiàn)網(wǎng)格

OK,首先,我們實(shí)現(xiàn)最簡(jiǎn)單的網(wǎng)格布局:

不考慮最外層的一圈邊框,我們可以首先利用多重線性漸變實(shí)現(xiàn)一個(gè)網(wǎng)格布局:

<div></div>
.g-grid {    width: 401px;    height: 451px;    background:repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px);    background-repeat: no-repeat;    background-size: 100% 100%, 100% 100%;    background-position: 0 0, 0 0;}

效果如下:

在最外層加一層邊框有非常多辦法,這里我們簡(jiǎn)單使用 outline 配合 outline-offset 即可:

.g-grid {    width: 401px;    height: 451px;    background:repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px);    background-repeat: no-repeat;    background-size: 100% 100%, 100% 100%;    background-position: 0 0, 0 0;    outline: 1px solid #000;    outline-offset: 5px;}

這樣,一個(gè)架子就差不多了:

當(dāng)然,棋盤中間的一行,是沒有格子的。要將上述漸變代碼處理一下,可以分成上下兩塊,利用 background-sizebackground-position 進(jìn)行分隔。

當(dāng)然,我們也可以在最上層直接再疊一層純白色漸變:

.grid {    // ...    background:// 最上層疊加一層白色漸變linear-gradient(#fff, #fff),// 下面兩個(gè)重復(fù)線性漸變實(shí)現(xiàn)網(wǎng)格repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px);    background-repeat: no-repeat;    background-size: calc(100% - 2px) 49px, 100% 100%, 100% 100%;    background-position: 1px 201px, 0 0, 0 0;}

到這里,其實(shí)核心還都是漸變,目前共 3 層漸變,得到這樣一個(gè)效果:

利用漸變實(shí)現(xiàn)交叉虛線十字

OK,我們繼續(xù),我們需要基于上述的基礎(chǔ),得到兩個(gè)交叉虛線十字,像是這樣:

這里其實(shí)真的有難度。想象一下,如果給你一個(gè) DIV,去實(shí)現(xiàn)其中一個(gè),可以怎么做呢?

通過 border 中特有的虛線 dashed?這樣可能就需要兩個(gè)元素設(shè)置單邊的虛線邊框,然后旋轉(zhuǎn)相交得到。(可以利用元素的兩個(gè)偽元素,實(shí)現(xiàn)在一個(gè) DOM 中)。

當(dāng)然,這樣的話,我們的標(biāo)簽就不夠用了。

所以,這里我們另辟蹊徑,繼續(xù)使用漸變!

首先,打個(gè)樣,如果是一個(gè) 100px x 100px 的 DIV,可以怎么利用漸變?nèi)ギ嫿徊嫣摼€十字呢?

<div></div>
div {    position: relative;    margin: auto;    width: 100px;    height: 100px;    border: 1px solid #000;    background: linear-gradient(45deg,transparent 0, transparent calc(50% - 0.5px),#000 calc(50% - 0.5px), #000 calc(50% + 0.5px),transparent calc(50% + 0.5px), transparent 0);}

我們首先利用漸變,實(shí)現(xiàn)一條 1px 的斜線,注意這里的漸變是從透明到黑色到透明,實(shí)現(xiàn)了一條 45° 的斜線。

我們?cè)俜?45° 過來(lái),利用多重線性漸變,實(shí)現(xiàn)透明到白色的漸變效果:

div {    position: relative;    margin: auto;    width: 100px;    height: 100px;    border: 1px solid #000;    background: // 漸變 1 repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),// 漸變 2linear-gradient(45deg,transparent 0, transparent calc(50% - 0.5px),#000 calc(50% - 0.5px), #000 calc(50% + 0.5px),transparent calc(50% + 0.5px), transparent 0);}

這樣,我們就得到了一條虛線:

好吧,這一步有一些同學(xué)可能會(huì)有一點(diǎn)疑惑,怎么變過來(lái)的。

我把上面漸變 1的透明色改成黑色,就很好理解了:

想象一下,上圖的黑色部分,如果是透明的,就能透出原本的那條斜線沒有被白色遮擋住的地方。

這里,需要提一下,在漸變中,越是先書寫的漸變,層級(jí)越高。

好,有了上面的鋪墊,我們基于上面的代碼,再繼續(xù)利用漸變,把上下兩個(gè)交叉虛線十字補(bǔ)齊即可:

.g-grid {    width: 401px;    height: 451px;    outline: 1px solid #000;    outline-offset: 5px;    background:// 最上層的白色塊,擋住中間的網(wǎng)格linear-gradient(#fff, #fff),// 實(shí)現(xiàn)網(wǎng)格布局repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px),// 棋盤上方的虛線1repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),linear-gradient(45deg, transparent,     transparent calc(50% - 0.5px),     #000 calc(50% - 0.5px),     #000 calc(50% + 0.5px),     transparent calc(50% + 0.5px),     transparent 0),// 棋盤上方的虛線2repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),linear-gradient(-45deg, transparent,     transparent calc(50% - 0.5px),     #000 calc(50% - 0.5px),     #000 calc(50% + 0.5px),     transparent calc(50% + 0.5px),     transparent 0),// 棋盤下方的虛線1repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),linear-gradient(45deg, transparent,     transparent calc(50% - 0.5px),     #000 calc(50% - 0.5px),     #000 calc(50% + 0.5px),     transparent calc(50% + 0.5px),     transparent 0),// 棋盤下方的虛線2repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),linear-gradient(-45deg, transparent,     transparent calc(50% - 0.5px),     #000 calc(50% - 0.5px),     #000 calc(50% + 0.5px),     transparent calc(50% + 0.5px),     transparent 0);    background-repeat: no-repeat;    background-size: calc(100% - 2px) 49px, 100% 100%, 100% 100%, // 交叉虛線 1100px 100px, 100px 100px, 100px 100px, 100px 100px,// 交叉虛線 2100px 100px, 100px 100px, 100px 100px, 100px 100px;    background-position: 1px 201px, 0 0, 0 0, // 交叉虛線 1151px 0, 151px 0, 151px 0, 151px 0,// 交叉虛線 2151px 350px, 151px 350px, 151px 350px, 151px 350px;}

嚯,這漸變代碼確實(shí)復(fù)雜了點(diǎn),但是其實(shí)每一塊的作用都是很清晰的,這樣,我們的棋盤就變成了這樣:

借助偽元素及 box-shadow 實(shí)現(xiàn)剩余符合

到這里,我們僅僅使用了元素本身,要知道,我們還有元素的兩個(gè)偽元素沒使用。要實(shí)現(xiàn)的只剩下多個(gè)的這個(gè)符合:

因?yàn)橐还惨獙?shí)現(xiàn) 12 個(gè)這樣的符號(hào),有的符合還是不完整的,所有這些要在剩余的元素的兩個(gè)偽元素中完成??蛇x的方法思來(lái)想去,也只有 box-shadow 了。

利用 box-shadow 能夠非常好的復(fù)制自身。這個(gè)技巧其實(shí)也反復(fù)講過非常多次了。

我們首先利用元素的一個(gè)偽元素,在這個(gè)位置,實(shí)現(xiàn)一個(gè)短橫線:

代碼大致如下:

.g-grid {    // ...    &::before {content: "";position: absolute;top: 95px;left: 35px;width: 10px;height: 1px;background: #000;    }}

我們利用 box-shadow 復(fù)制自身,可以完成一半橫線效果。當(dāng)然這里由于是個(gè)鏡面布局,可以利用鏡像 -webkit-box-reflect: below 減少一半的代碼:

.g-grid {    // ...    &::before {content: "";position: absolute;top: 95px;left: 35px;width: 10px;height: 1px;background: #000;box-shadow:     20px 0, 0 10px, 20px 10px,    300px 0, 320px 0, 300px 10px, 320px 10px,    -30px 50px, -30px 60px,    50px 50px, 50px 60px, 70px 50px, 70px 60px,    150px 50px, 150px 60px, 170px 50px, 170px 60px,    250px 50px, 250px 60px, 270px 50px, 270px 60px,    350px 50px, 350px 60px;-webkit-box-reflect: below 259px;    }}

效果如下:

最后,利用另外一個(gè)偽元素,完成另外一半的豎向橫線即可:

.g-grid {    // ...    &::before {// ...    }    &::after {// ...box-shadow:     10px 0, 0 20px, 10px 20px,    300px 0px, 300px 20px, 310px 0, 310px 20px,    -40px 50px, -40px 70px,    50px 50px, 50px 70px, 60px 50px, 60px 70px,    150px 50px, 150px 70px, 160px 50px, 160px 70px,    250px 50px, 250px 70px, 260px 50px, 260px 70px,    350px 50px, 350px 70px;-webkit-box-reflect: below 260px;    }}

這樣,我們就在一個(gè)標(biāo)簽內(nèi),得到這樣一個(gè)效果:

當(dāng)然,還剩下楚河、漢界 4 個(gè)字,這個(gè)也簡(jiǎn)單直接加在 div 中即可,配合一些簡(jiǎn)單的 CSS 調(diào)整,整個(gè)效果就在一個(gè)標(biāo)簽內(nèi)完成啦:

完整的代碼你可以戳這里:CodePen Demo -- CSS Chess board

好,實(shí)際中我確實(shí)不太推薦這么去寫,純粹是為了實(shí)現(xiàn)而實(shí)現(xiàn),少了很多代碼可讀性的考量。因此,本文更多的是給大家?guī)?lái)一些思路,當(dāng)遇到類似的問題的使用能夠有更多的靈感。

最后

到此這篇關(guān)于CSS單標(biāo)簽實(shí)現(xiàn)復(fù)雜的棋盤布局的文章就介紹到這了,更多相關(guān)單標(biāo)簽 實(shí)現(xiàn) 棋盤布局內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!

標(biāo)簽: CSS HTML
主站蜘蛛池模板: 离子色谱自动进样器-青岛艾力析实验科技有限公司 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 盘装氧量分析仪-防爆壁挂氧化锆分析仪-安徽吉帆仪表有限公司 | 有声小说,听书,听小说资源库-听世界网 | 卫浴散热器,卫浴暖气片,卫生间背篓暖气片,华圣格浴室暖气片 | 北京软件开发_软件开发公司_北京软件公司-北京宜天信达软件开发公司 | TYPE-C厂家|TYPE-C接口|TYPE-C防水母座|TYPE-C贴片-深圳步步精 | 原子吸收设备-国产分光光度计-光谱分光光度计-上海光谱仪器有限公司 | 防水试验机_防水测试设备_防水试验装置_淋雨试验箱-广州岳信试验设备有限公司 | 酶联免疫分析仪-多管旋涡混合仪|混合器-莱普特科学仪器(北京)有限公司 | 砂磨机_立式纳米砂磨机_实验室砂磨机-广州儒佳化工设备厂家 | 污水处理设备,一体化泵站,一体化净水设备-「梦之洁环保设备厂家」 | 河北码上网络科技|邯郸小程序开发|邯郸微信开发|邯郸网站建设 | 南京租车,南京汽车租赁,南京包车,南京会议租车-南京七熹租车 | 大白菜官网,大白菜winpe,大白菜U盘装系统, u盘启动盘制作工具 | 爆破器材运输车|烟花爆竹运输车|1-9类危险品厢式运输车|湖北江南专用特种汽车有限公司 | 拉力机-万能试验机-材料拉伸试验机-电子拉力机-拉力试验机厂家-冲击试验机-苏州皖仪实验仪器有限公司 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 钢骨架轻型板_膨石轻型板_钢骨架轻型板价格_恒道新材料 | 北京燃气公司 用户服务中心| 空气能暖气片,暖气片厂家,山东暖气片,临沂暖气片-临沂永超暖通设备有限公司 | 合肥风管加工厂-安徽螺旋/不锈钢风管-通风管道加工厂家-安徽风之范 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 阳光1号桔柚_无核沃柑_柑橘新品种枝条苗木批发 - 苧金网 | 百方网-百方电气网,电工电气行业专业的B2B电子商务平台 | 球盟会·(中国)官方网站| 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 艺术漆十大品牌_艺术涂料加盟代理_蒙太奇艺术涂料厂家品牌|艺术漆|微水泥|硅藻泥|乳胶漆 | 山东限矩型液力偶合器_液力耦合器易熔塞厂家-淄博市汇川源机械厂 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 自动气象站_气象站监测设备_全自动气象站设备_雨量监测站-山东风途物联网 | 深圳善跑体育产业集团有限公司_塑胶跑道_人造草坪_运动木地板 | 阴离子聚丙烯酰胺价格_PAM_高分子聚丙烯酰胺厂家-河南泰航净水材料有限公司 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 亮化工程,亮化设计,城市亮化工程,亮化资质合作,长沙亮化照明,杰奥思【官网】 | 肉嫩度仪-凝胶测试仪-国产质构仪-气味分析仪-上海保圣实业发展有限公司|总部 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 |