我正在尝试一些box-shadow技巧,我无法填充第一个方块(0 0 [颜色]).
最佳解释跟随样本:
.box {
width: 90px;
position: relative;
display: inline-block;
}
.box:before {
content: '';
width: 45px;
height: 45px;
position: absolute;
z-index: 90;
box-shadow: 0 0 #ffff00, 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00;
}
.mark {
font-size: 45px;
width: 45px;
text-align: center;
position: absolute;
}
?
第一个方块(0,0)实际上是伪元素占用的空间,因此用a填充它的唯一方法box-shadow是使用inset类似下面片段的阴影.
一个普通的box-shadow不能使用,因为正常的阴影总是在外面:)
.box {
width: 90px;
position: relative;
display: inline-block;
}
.box:before {
content: '';
width: 45px;
height: 45px;
position: absolute;
z-index: 90;
box-shadow: 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00, inset 0 0 0 45px orange;
}
.mark {
font-size: 45px;
width: 45px;
text-align: center;
position: absolute;
}
?
京公网安备 11010802040832号 | 京ICP备19059560号-6 