淘先锋技术网

首页 1 2 3 4 5 6 7

CSS box-shadow

box-shadow是CSS3的特性，可以通过这个特性指定阴影的位移距离、颜色、模糊程度、扩散程度，同样也支持内阴影，从而打造出阴影或者光晕的效果。

今天我在写一个开关（switch）的纯CSS实现时，发现很多地方都用到了box-shadow，然后就定下了今天的博文内容：P~

标准语法：

{box-shadow: inset x-offset y-offset blur-radius spread-radius color}
相对应的也就是：
{box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性可以向图层添加一个或多个阴影，如果需要添加多个阴影，则需要使用逗号“,”分开。

说明

  • 一共有六个特性值。值与值之间需要以至少一个空格进行间隔。
  • inset：该值为可选值，如果不设值的话，默认的投影方式是外阴影，如果设置阴影类型为“inset”，则其投影方式为内阴影。
  • x-offset：指的是阴影水平偏移量，该值可以是负的也可以是正的，如果为正值，则阴影在元素的右边；如果为负值，则阴影在元素的左边。该值为必要值。
  • y-offset：指的是阴影垂直偏移量，该值可以是负的也可以是正的，如果为正值，则阴影在元素的下面；如果为负值，则阴影在元素的上面。该值为必要值。
  • blur-radius：该值为可选值，其值只能为正值，设置值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
  • spread-radius：该值为可选值，该值可以是负的也可以是正的，如果为正值，则整个阴影都延展；如果为负值，则缩小。
  • color：该值为可选值，如果不设定任何颜色，则浏览器会取默认值。

运用box-shadow，让我们可以脱离PS繁琐的一张一张地来制作图片，且这样产生的阴影不会对排版产生影响。

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .wrap {
            width: px;
            height: px;
            border: px solid #000;
        }
        .inner {
            width: px;
            height: px;
            margin: px auto;
            background: #006400;
            box-shadow: px px #000;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
    box-shadow实践
</body>
</html>

浏览器兼容性

浏览器兼容性想必大家都会很关心，毕竟不兼容的，你写再多也只不过是多余的代码而已。

这里写图片描述

为了能兼容支持的各大浏览器的书写方式：

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

阴影模糊

blur-radius值越大，阴影越模糊。

这里写图片描述

div {   
    box-shadow:   px #ccc;
}

多层次阴影

写法：

.inner {
    box-shadow: inset  px px #ADFF2F,  px  #98FB98,  px  #228B22;
}

模拟多边框

实现效果如下：

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        div {
            width: px;
            height: px;
            background: #000;
            box-shadow:    px #fff,    px green,    px blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

当给同一个元素使用多个阴影属性时，需要注意他的顺序，最先写的阴影将显示在最顶层。

单边效果

使用多层次的box-shadow，以及x-offset和y-offset的正负值来实现单边效果。

实现效果如下：

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        div {
            width: px;
            height: px;
            background: #000;
            box-shadow:  px  gray,  -px  red, px   green, -px   blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

打造立体感

这里写图片描述

div {
    color: #fff;
    background-color: #BA55D3;
    font-family: "Arial";
    font-weight: ;
    font-size: em;
    display: block;
    padding: px;
    border-radius: px;
    box-shadow: px px px #9932CC, px px px rgba(, , , .);
    margin: px auto;
    width: px;
    text-align: center;
}

内阴影效果

实现效果如下：

这里写图片描述

div {
    box-shadow: inset   px #000;
}

内阴影增加spread值，加强凹陷的真实感。

这里写图片描述

div {
    box-shadow: inset   px px #000;
}

可能写到的情况还不是非常全面，还是希望这篇文章对大家有所帮助：）。欢迎多多交流~文中若有不正之处，欢迎指正。