box-shadow的第三个参数

box-shadow的第三个参数

视频中说是向内模糊,如下


http://img1.sycdn.imooc.com//climg/606d715309624cb315120562.jpg


这里设置的第三个参数为6px,当这个值增大的时候,感觉是向外扩展的,那么该值是向内还是向外扩展

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2021-04-08 10:08:21

同学你好,对于你的问题解答如下:

1、当设置了inset参数时,第三个参数是向内模糊的

2、下图所示的理解是可以的

http://img1.sycdn.imooc.com//climg/606e620309a55b6207790408.jpg

3、向内模糊的,可以在控制台通过调整第三个参数的值,查看模糊的方向,示例:

http://img1.sycdn.imooc.com//climg/606e658b0a93742404800527.jpg

祝学习愉快~

  • 老师的说明非常好,

    我的理解是:

    一开始朝阴影的内部模糊,当模糊的距离超出了阴影的显示部分的时候,会强制扩大阴影面积


    2023-04-26 00:00:32
  • 可以这样理解。

    2023-04-26 10:04:40
好帮手慕慕子 2021-04-07 17:11:39

同学你好,第三个参数默认是向外扩展设置模糊值的,视频中是因为老师设置了偏移值,所以在偏移值的基础上,会从外向内计算模糊值。老师画了一个简单的示例图帮助同学更好的理解,如下图所示:

http://img1.sycdn.imooc.com//climg/606d77250973327f13270879.jpg

祝学习愉快~


  • 提问者 CoffeePlayer #1
    ​<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
    div{
    width:100px;
    height:100px;
    background: #000;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
    box-shadow: 20px 20px 200px 0 yellow inset;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>



    老师,那么当内嵌时,它是往哪个方向模糊呢

    比如

    http://img1.sycdn.imooc.com//climg/606db192092ea2e723680682.jpg


    http://img1.sycdn.imooc.com//climg/606db27d0922a4f615980502.jpg


    这里模糊部分是20px,然后不是模糊的部分也是20px,模糊加不是模糊的一共40px吗?


    当模糊值指定的很大时,感觉整个图像都是模糊的了,所以当内嵌的时候,模糊是向哪个方向?

    http://img1.sycdn.imooc.com//climg/606db36909cb9c0f15830879.jpg


    http://img1.sycdn.imooc.com//climg/606db37b09c4024613440366.jpg




    2021-04-07 21:28:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师