box-shadow 属性详解

最新推荐文章于 2024-09-14 16:00:26 发布

linhd1102

最新推荐文章于 2024-09-14 16:00:26 发布

阅读量3k

点赞数

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

语法

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) }

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) }

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) }

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 属性在一个元素上能接受多个阴影值。添加至 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;
}

浮动效果

我们也能给 :after 为元素添加 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;
}