请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
以下代码,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>
第五个单元格全范围显示手型,它是本文的核心:利用伪元素做形状,单元格主体默认为矩形。其他两个单元格,第一和第九个,单元格主体就是四叶草,第九个企图加载相同尺寸的伪元素,很遗憾,伪元素也被切割成了四叶草——伪元素设置为紫色。可见,为让有镂空的单元格能顺畅实现鼠标交互,我们可以像第五个单元格那样进行处理:单元格的形状使用伪元素完成,单元格主体原样透明呈现。
|