请问老师到底是什么机制

请问老师到底是什么机制

请问老师内阴影到底是什么机制,想了半天没向懂。

外阴影偏移量我懂,内阴影

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
background: red;
box-shadow: 20px 20px 0 20px yellow inset;
width: 500px;
height: 500px;
float: left;
}

</style>
</head>
<body>
<div class="one"></div>

</body>
</html>

为什么我设置了20px的spread为什么四周没有阴影,以及他的偏移机制到底是怎么回事

正在回答

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

4回答

当阴影类型选为inset时,阴影水平偏移量为正值时,阴影是在对象的左边框的里面(左边框的右边)和上边框的里面(上边框的底部),为负值时则相反;

http://img1.sycdn.imooc.com//climg/5af181750001044710020707.jpg

希望可以帮到你~

  • hy_wang 提问者 #1
    请问老师如果一边窄为负,就是隐藏了阴影对吧。知我者
    2018-05-08 19:48:11
  • hy_wang 提问者 #2
    实际上隐藏的设置印阴影尺寸小于隐藏的吃尺寸仍然还是不显示隐藏的阴影是吗。请问老师我的理解对吗
    2018-05-08 19:49:53
  • 卡布琦诺 回复 提问者 hy_wang #3
    你可以这么理解,祝学习愉快~
    2018-05-09 10:06:03
卡布琦诺 2018-05-07 18:23:39

http://img1.sycdn.imooc.com//climg/5af029280001972c14850353.jpg

通过调节水平阴影的位置和垂直阴影的位置,可以调整阴影的位置。

希望可以帮到你~


  • 提问者 hy_wang #1
    老师可能你没明白我的意思,我是想说如果设置了内阴影且尺寸为25px那么阴影向内延伸25px。这个时候在设置偏移25px 25px为什么阴影底部和右侧只剩下5px的阴影?这里偏移的20px为什么会覆盖25px的尺寸
    2018-05-08 10:18:32
小于飞飞 2018-05-07 16:08:48

1. 当没有偏移值的情况下,效果如下:http://img1.sycdn.imooc.com//climg/5af008d5000151a612380626.jpg

2. 当偏移20后,所以右边和下面移出20,看到的效果就剩下20了,效果如下:

http://img1.sycdn.imooc.com//climg/5af0089f0001085c12570648.jpg

希望解答你的疑问,祝学习愉快。

  • 提问者 hy_wang #1
    请问老师这个偏移是什么偏移??看不懂啊,阴影的偏移? 可是为什么看上去像是元素再偏移。但是是怎么回事希望老师可以指点
    2018-05-07 16:18:34
  • 小于飞飞 回复 提问者 hy_wang #2
    可以通过f12, 盒模型看下,设置内阴影,该元素的实际大小没有影响。
    2018-05-07 18:58:52
小于飞飞 2018-05-06 19:42:54

内阴影在其元素内显示,超出去的不显示,如下:

http://img1.sycdn.imooc.com//climg/5aeee9f50001f6dd09600545.jpg

希望解答你的疑惑,祝学习愉快。

  • 提问者 hy_wang #1
    老师我不明白,请问如果spread设置为40px为什么上和右会显示20px的阴影?
    2018-05-07 15:55:01
  • 提问者 hy_wang #2
    这里的20px以及-20px的偏移量应该怎么理解???为什么元素变小了? 既然阴影不能超出元素这个偏移是什么意思?
    2018-05-07 15:56:31
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

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

在线咨询

领取优惠

免费试听

领取大纲

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