巧妙使用CSS阴影属性的案例本文章主要是通过巧妙利用CSS的**box-shadow**属性和 **:hover**

本文已参与[新人创作礼]活动，一起开启掘金创作之路。

本文章主要是通过巧妙利用CSS的box-shadow属性和 :hover 鼠标悬停等属性来实现一些好玩且有趣的效果，平时可以根据自己需要的效果来设计不同样式。

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。

为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。

效果图：

HTML+CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #031628;
            /* background-color: #000; */
        }

        a {
            text-decoration: none;
            display: block;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;

        }

        a:nth-child(1) {
            border: 1px solid #4cc9f0;
            color: #4cc9f0;
        }

        a:nth-child(1):hover {
            background: #4cc9f0;
            box-shadow: 10px 10px 100px 6px rgba(76, 201, 240, 1);
            color: #fff;
            border: 0px;
        }

        a:nth-child(2) {
            color: rgb(143, 13, 143);
            border: 1px solid rgb(143, 13, 143);
        }

        a:nth-child(2):hover {
            color: #fff;
            background: rgb(175, 10, 175);
            box-shadow: 10px 10px 100px 1px rgb(209, 94, 238);
            border: 0;
        }

        a:nth-child(3) {
            color: rgb(39, 247, 136);
            border: 1px solid rgb(39, 247, 136)
        }

        a:nth-child(3):hover {
            color: #fff;
            background: rgb(39, 247, 136);
            box-shadow: 10px 10px 100px 6px rgb(39, 247, 136);
            border: 0;
        }

        a:nth-child(4) {
            background: linear-gradient(to right, rgb(15, 117, 124), rgb(51, 211, 131), rgb(148, 221, 64));
            position: relative;
            overflow: hidden;
            color: #fff;
        }

        a:nth-child(4)::before {
            content: "";
            display: block;
            width: 0;
            height: 100%;
            background-color: rgb(211, 230, 228, .4);
            position: absolute;
            transition: all .7s;
        }

        a:nth-child(4):hover:before {
            width: 100px;
        }

        a:nth-child(5) {
            color: rgb(39, 247, 136);
            background: linear-gradient(to right, rgb(55, 0, 255), rgb(12, 255, 4), rgb(255, 8, 0));
        }

        a:nth-child(5):hover {
            color: #fff;
            background: rgb(39, 247, 136);
            box-shadow: 10px 10px 1000px 6px rgb(39, 247, 136);
            border: 0;
        }

        a:nth-child(6) {
            color: rgb(39, 247, 136);
            background: linear-gradient(to right, rgb(49, 49, 49), rgb(172, 172, 172), rgb(49, 49, 49));
        }

        a:nth-of-type(6):hover {
            color: #fff;
            box-shadow: 10px 10px 100px 10px rgb(172, 172, 172);
            border: 0;
        }
    </style>
</head>

<body>
    <a href="#">hover1</a>
    <a href="#">hover2</a>
    <a href="#">hover3</a>
    <a href="#">hover4</a>
    <a href="#">hover5</a>
    <a href="#">hover6</a>
</body>

</html>