侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

阴影

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 44 阅读 / 673 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS / 阴影
文本阴影
text-shadow:X-Offset Y-Offset blur(模糊) color
元素阴影
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
半径的单位都是px,投影方式设置为inset则为内投影,不设就是外投影.
阴影扩展半径 : 设为负值就会变小
添加多个阴影用逗号隔开


<div class="player-cover__item" style="background-image: url("../t1.png");"></div>
阴影是用的::before  , 下面是css

3D 球
box-shadow: inset 0 0 2vmin #fff8, inset 3vmin 0 5vmin #0003, inset -3vmin 0 5vmin #0003, inset 0 -20vmin 3vmin -14vmin #0007;

3D 字体
color: #ffcf00;
text-shadow: 0 10px 7px rgb(0 0 0 / 40%), 0 -10px 1px #fff;
0

评论区