CSS 盒子阴影过渡答案

【问题标题】：CSS box-shadow transitionCSS 盒子阴影过渡
【发布时间】：2014-04-22 04:09:23
【问题描述】：

我的网站上有几个 div 元素，它们是具有插入框阴影的类的一部分。当我将鼠标悬停在这些 div 框上时，我希望从 box-shadow 中删除 inset 属性，并且希望它转换为向外的阴影。但是，尽管阴影正确更改，但在更改期间它不会过渡。它只是立即切换阴影。我该如何解决这个问题？

这是 HTML：

<header>

    <div id="header-stuff">

        <p class="header-big">Green Homes 101</p>

        <div id="header-links">

            <div class="header-link">
                <a href="alt-en.html#top">
                    <img src="images/index/alt-en.svg" alt="Alternate Energy" />
                    <p>Alternate Energy</p>
                </a>
            </div>

            <div class="header-link">
                <a href="diy.html#top">
                    <img src="images/index/diy.svg" alt="DIY" />
                    <p>DIY</p>
                </a>
            </div>

            <div class="header-link">
                <a href="buying.html#top">
                    <img src="images/index/buying.svg" alt="Buying Green Homes" />
                    <p>Buying Green Homes</p>
                </a>
            </div>

            <div class="header-link">
                <a href="about.html#top">
                    <img src="images/index/about.svg" alt="About Us" />
                    <p>About Us</p>
                </a>
            </div>

        </div>

    </div>

</header>

这是 CSS：

.header-link {
    display: inline-block;
    background-color: rgba(50, 125, 42, 0.75);
    margin: 1%;
    overflow: hidden;
    border-radius: 10%;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.7) inset;

    -ms-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
}

.header-link > a {
    display: block;
    width: 100%;
    height: 100%;
    color: rgba(10, 85, 2, 0.35);
    text-shadow: 1px 4px 6px rgba(33, 108, 25, 0.85), 0 0 0 #000, 1px 4px 6px rgba(33, 108, 25, 0.85);
    border-radius: 10%;
}

.header-link > a > img {
    display: block;
    width: 100%;
    height: 80%;
}

.header-link:hover {
    background-color: #1e9cd7;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.7);

    -ms-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
}

【问题讨论】：

你能把你的代码贴在这里吗？
似乎当您更改框阴影的样式时（从开始到插入-过渡不适用...但是，我可以建议使用 -X,-Y 像素值来“恶搞”和插入框并以这种方式过渡
jsfiddle.net/ruGtF *刚刚玩过盒子阴影 - 有帮助吗？

标签： jquery html css

【解决方案1】：

您不能从普通框阴影过渡到插入框阴影。

还好可以设置多个box shadow，这样就可以写了

.header-link {
    box-shadow:0 0 10px rgba(0, 0, 0, 0.7) inset, 0px 0px 0px white;
}

和

.header-link:hover {
    box-shadow: 0px 0px 0px white inset, 0 0 10px rgba(0, 0, 0, 0.7);
}

请注意，这些阴影与您的阴影相同，因为多余的阴影为 0px，因此不会显示。另请注意，顺序很重要：只有当第一个阴影在两者中插入（或正常），第二个在两者中插入（或正常）时，浏览器才会转换它，依此类推

fiddle

悬停状态的转场我已经去掉了，你不需要重复了。

【讨论】：