巧用css-doodle单元格伪元素做形状

马黑黑

以下代码，1、5、9单元格都通过 @shape 属性切成四叶草外观，运行代码后请逐一将鼠标移上去，观察鼠标指针手型出现的情形。

<css-doodle grid="3">
	:doodle {@size: 300px; gap: 1px;}
	background: tan;
	@nth(1) {
		@shape: clover 4;
		background: rebeccapurple;
		cursor: pointer;
	}
	@nth(5) {
		background: pink;
		cursor: pointer;
		:before {
			content: '';
			@size: 100%;
			@shape: clover 4;
			background: red;
		}
	}
	@nth(9) {
		@shape: clover 4;
		cursor: pointer;
		:after {
			content: '';
			@size: 100%;
			background: purple;
			cursor: pointer;
		}
	}
</css-doodle>

运行代码

第五个单元格全范围显示手型，它是本文的核心：利用伪元素做形状，单元格主体默认为矩形。其他两个单元格，第一和第九个，单元格主体就是四叶草，第九个企图加载相同尺寸的伪元素，很遗憾，伪元素也被切割成了四叶草——伪元素设置为紫色。可见，为让有镂空的单元格能顺畅实现鼠标交互，我们可以像第五个单元格那样进行处理：单元格的形状使用伪元素完成，单元格主体原样透明呈现。

马黑黑

利用一楼对第五个单元格的处理方法，《大地》一帖，可以空出一个单元格：四叶草按钮仅需使用一个单元格来完成，所以在相同单元格总数的基础上，鹰多出了一只——

http://mahei.freeee.ml/art/bshow ... rt=mahei_1686231267

未经改造的帖子，只有两只鹰——

https://www.huachaowang.com/foru ... hread&tid=69267

马黑黑

实际应用中，第五单元格的处理细节中，应透明化单元格主体的背景色，方法：

如果单元格从未设置背景色，则不设置它就行；如果总体设置了所有单元格的 background 属性，在它这里则需要设置为 background: none; 或 background: transparent; 即可。

红影

马黑黑 发表于 2023-6-9 07:58
实际应用中，第五单元格的处理细节中，应透明化单元格主体的背景色，方法：

如果单元格从未设置背景色， ...

你设单元格底色，只是为了让方便观察鼠标指针手型吧。

红影

这个好，可以节约一个单元格了

红影

“单元格的形状使用伪元素完成，单元格主体原样透明呈现。”
嗯，这样就能让有镂空的单元格能顺畅实现鼠标交互了，记下了。谢谢黑黑

马黑黑

红影 发表于 2023-6-9 12:27
“单元格的形状使用伪元素完成，单元格主体原样透明呈现。”
嗯，这样就能让有镂空的单元格能顺畅实现鼠标 ...

慢慢了解css-doodle的特性

马黑黑

醉美水芙蓉 发表于 2023-6-9 11:50
好神奇的，多出两只老鹰！

马黑黑

红影 发表于 2023-6-9 12:23
这个好，可以节约一个单元格了

方法确实不错

马黑黑

红影 发表于 2023-6-9 12:22
你设单元格底色，只是为了让方便观察鼠标指针手型吧。

是的

红影

马黑黑 发表于 2023-6-9 13:45
慢慢了解css-doodle的特性

正在慢慢适应它呢。

红影

马黑黑 发表于 2023-6-9 13:46
方法确实不错

又是被黑黑研究出来的新方法。

红影

马黑黑 发表于 2023-6-9 13:46
是的

我猜对了

梦缘

谢老师的代码分享，问好！

樵歌

加分走人

南无月

新课新课，留着慢慢学

马黑黑

南无月 发表于 2023-6-9 18:42
新课新课，留着慢慢学

理解CSS伪元素，理解这个就不难

马黑黑

红影 发表于 2023-6-9 16:34
我猜对了

加十分

马黑黑

红影 发表于 2023-6-9 16:33
又是被黑黑研究出来的新方法。

常规CSS，伪元素是不会被跟着切割的