CSS box-shadow

最新推荐文章于 2023-02-20 10:39:24 发布

man_tutu

最新推荐文章于 2023-02-20 10:39:24 发布

阅读量547

点赞数

分类专栏： CSS 文章标签： css3 box-shadow 阴影内阴影

本文链接：https://blog.csdn.net/man_tutu/article/details/55049905

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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: 80px;
            height: 80px;
            border: 1px solid #000;
        }
        .inner {
            width: 30px;
            height: 30px;
            margin: 25px auto;
            background: #006400;
            box-shadow: 50px 50px #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: 0 0 20px #ccc;
}

多层次阴影

写法：

.inner {
    box-shadow: inset 0 3px 5px #ADFF2F, 0 2px 0 #98FB98, 0 4px 0 #228B22;
}

模拟多边框

实现效果如下：

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        div {
            width: 60px;
            height: 40px;
            background: #000;
            box-shadow: 0 0 0 2px #fff, 0 0 0 4px green, 0 0 0 6px 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: 60px;
            height: 40px;
            background: #000;
            box-shadow: 0 2px 0 gray, 0 -2px 0 red, 2px 0 0 green, -2px 0 0 blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

打造立体感

这里写图片描述

div {
    color: #fff;
    background-color: #BA55D3;
    font-family: "Arial";
    font-weight: 700;
    font-size: 2.5em;
    display: block;
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0px 9px 0px #9932CC, 0px 9px 18px rgba(0, 0, 0, .7);
    margin: 100px auto;
    width: 160px;
    text-align: center;
}

内阴影效果

实现效果如下：

这里写图片描述

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

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

这里写图片描述

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

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

man_tutu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS box-shadow

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

扫一扫

专栏目录