box-shadow属性详解

box-shadow 是一个 CSS3 属性,它让我们几乎能在任意元素上添加阴影效果,就像我们在设计软件中的可添加的下拉阴影(drop shadow)一样。这种阴影效果让我们能在原本是平面的 2 维页面上创造出立体感。

box-shadow属性语法

box-shadow 属性接受值最多由五个不同的部分组成。


box-shadow: offset-x offset-y blur spread color position;

不像其它的属性,比如 border,它们的接受值可以被拆分为一系列子属性,box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要,尤其是那些长度值。

offset-x

第一个长度值指明了阴影水平方向的偏移,即阴影在 x 轴的位置。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧。


.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

box-shadow属性offset-x

offset-y

第二个长度值指明了阴影竖直方向的偏移,即阴影在 y 轴的位置。值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方。


.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

box-shadow属性offset-y

blur

第三个长度值代表了阴影的模糊半径,举例来说,就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的,完全完全没有模糊效果。blur 值越大,阴影则更不锋利而更朦胧 / 模糊。负值是不合法的,会被修正成 0。


.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

box-shadow属性blur

color

color 部分的值正如你所预料的,是指阴影的颜色。它可以是任意的颜色单元 (见 在 CSS 中与颜色打交道)。


.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

box-shadow属性color

多重阴影

box-shadow 属性在一个元素上能接受多个阴影值。添加至 box-shadow 的阴影以逗号分离。


.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
    20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}

多重阴影

圆形阴影

box-shadow 属性的边缘半径由同个元素上的 border-radius 所控制。


.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
    border-radius: 50%;
}

圆形阴影

大杂烩

把这些部分放在一起,我们能通过使用 box-shadow 创造出一些非常惊人的效果。

一个可选的非布局边框

我们可以使用 box-shadow 属性创造元素的边框,而不会影响盒模型或者页面的其他布局。而且,使用多重阴影,我们可以给元素的不同边框创造不一样的效果。


.simple {
    box-shadow: 0px 0px 0px 40px indianred;
}
.multiple {
    box-shadow: 20px 20px 0px 20px lightcoral,
                -20px -20px 0px 20px mediumvioletred,
                0px 0px 0px 40px rgb(200,200,200);
}

一个可选的非布局边框

弹出效果

box-shadow (与 transform) 上使用转换,我们可以做出元素移近或移远的视觉效果。


.popup {
    transform: scale(1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
    transform: scale(1.3);
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}

弹出效果

浮动效果

box-shadow 属性。利用这点,我们能在元素下面做出阴影,提供被举起与丢下的视觉效果。


.floating {
    position: relative;
 
    transform: translateY(0);
    transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
 
    transform: translate(-50%, 0);
    transition: transform 1s;
}
/* Hover States */
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}

浮动效果

还有很多能利用 box-shadow 实现的效果。例如,这个有名的 pen 就使用它做出了 8 种纸张效果。尽管它表面上只是一个创造简单下拉阴影(drop shadow)的工具,但它可比那强多了。

原文链接:https://bitsofco.de/the-box-shadow-property/
众成翻译:http://www.zcfy.cc/article/373

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/318.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部