关注大学生就业,培养泛IT高端人才

陕西新榜样官方网站

您的位置: 主页 > 新闻动态 > IT资讯 >

探索Box-Shadow属性的奥秘

来源:WEB开发培训 发布时间:2018-08-17 浏览量:

  Box-Shadow属性是一个Css3属性,允许我们在任何元素上创建阴影效果,类似于在设计软件中的“Drop Shadow”。这些阴影效果允许我们在原本平面、二维的页面上面创建出深度(第三维)的错觉。

WEB开发培训

  Box-Shadow属性并不像Border 等属性值可以拆分成子属性, 它是独立的。这就意味着记录属性值的顺序更加重要,特别是长度值。而且,在WEB开发培训时,我们可以用Box-Shadow属性创造出一些不同的效果。

  Box-Shadow属性接收一个由6个部分组成的值:

  一、Offset-x

  第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边,而负值使阴影出现在元素的左边。

  二、Offset-y

  第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边,而负值使阴影出现在元素的下边。

  三、Blur

  第三个长度值代表阴影的模糊半径,举例说明,就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的,没有任何模糊。模糊数值越大,尖锐度越小,阴影越朦胧和模糊。负值是不被允许的,并会被处理成0。

  四、Spread

  第四个,同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩的比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。

  五、Color

  颜色值,也就是阴影的颜色。它可以是任何颜色单位。

  六、Position

  Box-Shadow属性的最后一个值是一个可选的关键字,它代表着阴影的位置。默认情况下,这个值并而没有给出,这意味着阴影是一个外部阴影。我们能通过关键字Inset使阴影变成内部阴影。

  其实将以上所有的部分放在一起后,我们可以通过使用Box-Shadow属性创造出一些奇妙的效果,还在进行培训或没参加过WEB开发培训的人们,都可以尝试一下,看看它们能创造出什么效果。

  更多相关WEB开发培训资讯,请点击: www.xinbangyang.com

  联系地址:陕西省西安市碑林区东大街端履门云龙大厦9楼

IT培训 服务