草丁图书馆

  1. 首页 > 生活杂烩 > >

boxshadow 探索 CSS3 中的 box-shadow 属性

原文:Ire Aderinokun
翻译:伯乐在线专栏作家老程
链接:http://web.jobbole.com/87938/

发现一些你从未见过的应用。
“盒子阴影”属性
Box-shadow属性是CSS3属性，它允许我们在几乎任何元素上创建阴影效果，类似于设计软件中的“投影”。这些阴影效果允许我们在原始的平面二维页面上创建深度(第三维)的幻觉。
语法
框形阴影属性接收一个5部分的值
框阴影:offset-x offset-y模糊扩展颜色位置；
像边框这样的属性值可以分成子属性，而与此不同的是，阴影属性是独立的。这意味着记录属性值的顺序更重要，尤其是长度值。
偏移量-x
第一个长度值指定阴影的水平偏移。也就是阴影在x轴上的位置。正值会导致阴影出现在元素的右侧，负值会导致阴影出现在元素的左侧。
。左{框影:20px0px10px0pxrgba(0，0，0，0.5)}
。右{框影:-20px0px10px0pxrgba(0，0，0，0.5)}

偏移-y
第二个长度值指定阴影的垂直偏移。也就是阴影在y轴上的位置。正值会导致阴影出现在元素的顶部，而负值会导致阴影出现在元素的底部。
。左{框影:0px20px10px0pxrgba(0，0，0，0.5)}
。右{框影:0px-20px10px0pxrgba(0，0，0，0.5)}

虚化
第三个长度值代表阴影的模糊半径，例如，就像您在设计软件中使用高斯模糊过滤器一样。值为0意味着阴影完全是实心的，没有任何模糊。模糊数越大，锐度越小，阴影越朦胧模糊。负值是不允许的，将被视为0。
。左{框影:0px0px0px0pxrgba(0，0，0，0.5)}
。中间{框影:0px0px20px0pxrgba(0，0，0，0.5)}
。右{框影:0px0px50px0pxrgba(0，0，0，0.5)}

传播
第四个也是最后一个长度值代表阴影的大小。这个值可以认为是从元素到阴影的距离。正值将阴影向元素的所有方向扩展指定的值。负值会将阴影缩小到小于元素本身的大小。默认值0使阴影拉伸到与元素相同的大小。
。左{框影:0px0px20px0pxrgba(0，0，0，0.5)}
。中间{框影:0px0px20px20pxrgba(0，0，0，0.5)}
。右{框影:0px50px20px-20pxrgba(0，0，0，0.5)}

位置
框阴影属性的最后一个值是一个可选的关键字，它表示阴影的位置。默认情况下，不给出该值，这意味着阴影是外部阴影。我们可以使用关键字inset使阴影成为内部阴影。
。左侧{阴影框:20px20px10px0pxrgba(0，0，0，0.5)插图}
。右{框影:20px20px10px0pxrgba(0，0，0，0.5)}

多重阴影
箱形阴影属性可以接受单个元素上的多个阴影。每个阴影都是通过逗号分隔的框阴影属性列表加载的。
。foo{
框影:20px 20 px10px0 px 0 pxrgba(0，0，0，0.5)插图，/*内部阴影*/
20px20px10px0pxrgba(0，0，0，0.5)；/*外部阴影*/
}

圆形阴影
框形阴影属性的边界半径由元素的边界半径属性控制。
。foo{
框影:20px20px10px0pxrgba(0，0，0，0.5)；
边界半径:50%；
}

把它们放在一起。
把所有的部分放在一起，我们可以通过使用盒子阴影属性来创建一些奇妙的效果。
非布局模块边界的替代
我们可以使用框阴影属性来创建一个被边界包围的元素，但是它不会干扰页面上的框模型或其他布局。更重要的是，通过使用它来创建多个阴影，我们可以在元素的不同边缘上有不同风格的边界。
。简单{
box-shadow:0px 0px 0px 40 pxxindiannred；
}
。多重{
box-shadow:20px 20 px0px 20 pxlightcoral，
-20px-20px 0px 20 pxmediumviolered，
0px0px0px40pxrgb(200，200，200)；
}

boxshadow 探索 CSS3 中的 box-shadow 属性


文章图片

弹出效果

推荐阅读


上一篇：居家用品有哪些 家居用品有哪些 家居用品如何选购

下一篇：重生之灿如夏花 《The King：永远的君主》收视率下降！“金恩淑神话”陷入危机