论坛 › 马黑黑教程专版 › 元素阴影（box-shadow）应用实例

马黑黑 发表于 2023-3-4 08:54

元素阴影（box-shadow）应用实例

<style>

#mydiv {
        margin: 200px auto;
        width: 100px;
        height: 100px;
        background: snow;
        border-radius: 50%;
        box-shadow:
                0 0 50px 10px black inset,
                120px 120px 20px gray,
                120px -120px 20px gray,
                -120px 120px 20px gray,
                -120px -120px 20px gray;
        animation: rot 3s infinite;
}

@keyframes rot {
        to { transform: rotate(360deg); }
}

</style>

<div id="mydiv"></div>

马黑黑 发表于 2023-3-4 08:55

代码
<style>
#mydiv {
        margin: 200px auto;
        width: 100px;
        height: 100px;
        background: snow;
        border-radius: 50%;
        box-shadow:
                0 0 50px 10px black inset,
                120px 120px 20px gray,
                120px -120px 20px gray,
                -120px 120px 20px gray,
                -120px -120px 20px gray;
        animation: rot 3s infinite;
}
@keyframes rot {
        to { transform: rotate(360deg); }
}
</style>

<div id="mydiv"></div>

马黑黑 发表于 2023-3-4 09:16

box-shadow属性语法：

    box-shadow: 水平阴影位置垂直阴影位置模糊半径扩展半径[可选] 阴影颜色

说明：除扩展半径参数，其余四个参数是必选参数。所有参数值，非 0 值的必须带单位（如px）。位置参数支持负数值，值为负数是分别表示向左、向上偏移，正数表示向右、向下偏移。模糊半径将阴影模糊化，值越高阴影的模糊度越大。扩展半径可以设置阴影的大小，默认或缺省值是 0 表示阴影大小和元素自身尺寸一致。

马黑黑 发表于 2023-3-4 09:18

阴影可以多重。设置时，各重阴影设置语句用小角逗号隔开。

红影 发表于 2023-3-4 09:55

这个好，可以更好地理解阴影在各个方向的样子，而且这些阴影转动起来还挺漂亮的呢{:4_199:}

马黑黑 发表于 2023-3-4 10:37

红影 发表于 2023-3-4 09:55
这个好，可以更好地理解阴影在各个方向的样子，而且这些阴影转动起来还挺漂亮的呢

可以设计一下

梦油 发表于 2023-3-4 10:45

阴影设计独辟蹊径、领异标新。

马黑黑 发表于 2023-3-4 10:57

梦油 发表于 2023-3-4 10:45
阴影设计独辟蹊径、领异标新。

感谢支持

梦油 发表于 2023-3-4 11:19

马黑黑 发表于 2023-3-4 10:57
感谢支持

别客气。

马黑黑 发表于 2023-3-4 11:48

梦油 发表于 2023-3-4 11:19
别客气。

{:4_191:}

小辣椒 发表于 2023-3-4 12:09

看见了，红影刚才用了这个效果

小辣椒 发表于 2023-3-4 12:09

好像不一样

马黑黑 发表于 2023-3-4 13:00

小辣椒 发表于 2023-3-4 12:09
好像不一样

不尽一致

红影 发表于 2023-3-4 22:17

马黑黑 发表于 2023-3-4 10:37
可以设计一下

嗯嗯，这个可以用在帖子里，可以当播放器，也可以当可以联动的效果{:4_187:}

马黑黑 发表于 2023-3-4 22:24

红影 发表于 2023-3-4 22:17
嗯嗯，这个可以用在帖子里，可以当播放器，也可以当可以联动的效果

想到的都可以

红影 发表于 2023-3-5 12:40

马黑黑 发表于 2023-3-4 22:24
想到的都可以

看到了黑黑的范例帖子了，真棒{:4_187:}

梦缘 发表于 2023-3-5 13:30

这个好，欣赏学习，感谢分享！{:4_190:}

马黑黑 发表于 2023-3-5 15:32

梦缘 发表于 2023-3-5 13:30
这个好，欣赏学习，感谢分享！

{:4_190:}

马黑黑 发表于 2023-3-5 15:34

红影 发表于 2023-3-5 12:40
看到了黑黑的范例帖子了，真棒

还不错

红影 发表于 2023-3-6 10:38

马黑黑 发表于 2023-3-5 15:34
还不错

黑黑范例和这里相比又做了改进。

查看完整版本: 元素阴影（box-shadow）应用实例