|
|
本帖所使用的音频控制器,CSS代码如下:
#mplayer {
position: absolute;
content: '';
right: 530px;
top: 68px;
width: 60px;
height: 60px;
border-radius: 80%;
background: transparent;
box-shadow: 10px 15px 0 #afb2bc;
cursor: wait;
}
暗红色部分,其一,content: '';,这一句用于伪元素设定,应删掉;其二,cursor: wait;,设定鼠标指针形状用了等待,不合理,应是手型 pointer ,手型会告诉用户这里可以点击,等待则告诉用户你要等待。
此外,由于主元素并未显示出来(背景色为透明 transparent),我们需要阴影能够接受点击,而阴影是没有这个功能的,所以,我们需要借助主元素的伪元素来囊括阴影所在的位置,因为伪元素会跟随主元素接受点击交互:
#mplayer::before {
position: absolute;
content: '';
width: 70px;
height: 75px;
/*border: 1px solid tan;*/
}
边框不是必须的,所以注释掉了,把注释去掉,会看到它刚好包含了阴影在它的范围里面。这是为什么?伪元素设置为绝对定位,那么,在有定位设置的主元素里,它的 top 和 left 会默认都是0,则,它的宽度比主元素多了10个像素、高度多了15个像素,所多出的部分恰好是主元素阴影的右偏移量和下偏移量,所以伪元素的范围包含了阴影。
@绿叶清舟 @红影 @小辣椒 @雨中悄然
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|