Question

我读过一次，关于如何将普通 box-shadow 转换为 inset box-shadow 是不可用的。我想知道这是否是我的转换不起作用的原因，还是我的代码有问题？另外，如果在这种情况下无法进行转换，我该怎么办？

这是我的代码以防万一：

.event_con > p:nth-of-type(1),
.event_con > p:nth-of-type(2){
    margin-top: 125px;
    width: 80px;
    height: 100px;
    border-radius: 25px;
    background: #f7f7f7;
    box-shadow: 3px 3px 18px #a5a5a5,
        -1px -1px 10px #e2e2e2;
    cursor:pointer;
    transition:all 0.4s;
}

.event_con > p:nth-of-type(1) {
    float: left;
    margin-right: 50px;
    position: relative;
}

.event_con > p:nth-of-type(1) img {
    position: absolute;
    left: 28px;
    top: 30px;
}

.event_con > p:nth-of-type(2) {
    float: right;
    position: relative;
}

.event_con > p:nth-of-type(2) img {
    position: absolute;
    right: 28px;
    top: 30px;
}


.event_con > p:nth-of-type(1):hover,
.event_con > p:nth-of-type(2):hover{
    background: #efefef;
    box-shadow: inset 5px 5px 10px #b5b5b5,
            inset -5px -5px 5px #ffffff;
}

<div class="event_con">
       <p><img src="https://via.placeholder.com/20x35" alt="pre" width="20" height="35"></p>
       <p><img src="https://via.placeholder.com/20x35" alt="next" width="20" height="35"></p>
</div><!--event_con-->

Answer 1

.event_con > p:nth-of-type(1),
.event_con > p:nth-of-type(2){
    margin-top: 125px;
    width: 80px;
    height: 100px;
    border-radius: 25px;
    background: #f7f7f7;
    box-shadow: 3px 3px 18px #a5a5a5,
        -1px -1px 10px #e2e2e2;
    cursor:pointer;
    transition:ease 0.4s all;
}

.event_con > p:nth-of-type(1) {
    float: left;
    margin-right: 50px;
    position: relative;
}

.event_con > p:nth-of-type(1) img {
    position: absolute;
    left: 28px;
    top: 30px;
}

.event_con > p:nth-of-type(2) {
    float: right;
    position: relative;
}

.event_con > p:nth-of-type(2) img {
    position: absolute;
    right: 28px;
    top: 30px;
}


.event_con > p:nth-of-type(1):hover,
.event_con > p:nth-of-type(2):hover{
    background: #efefef;
    box-shadow: 0px 0px 0px #a5a5a5,
    -1px -1px 10px #e2e2e2, inset 5px 5px 10px #b5b5b5,
            inset -5px -5px 5px #ffffff;
}

<div class="event_con">
       <p><img src="https://via.placeholder.com/20x35" alt="pre" width="20" height="35"></p>
       <p><img src="https://via.placeholder.com/20x35" alt="next" width="20" height="35"></p>
</div><!--event_con-->

我们可以通过在悬停时指定 0px OUTER 阴影和根据需要插入阴影来解决此问题。

如果我们只提供一个 INSET 阴影，则 INNER 阴影会简单地覆盖正常的 OUTER 阴影 css。

我希望我能够解释这一点：D

Answer 2

确实，您无法从 inset 过渡到 normal。

但是，正如您已经在做的那样，您可以应用多个框阴影。

因此，一种解决方法是将 normal box-shadow 转换为 0，并将 inset 转换为预期值：

.event_con > p:nth-of-type(1),
.event_con > p:nth-of-type(2){
    margin-top: 125px;
    width: 80px;
    height: 100px;
    border-radius: 25px;
    background: #f7f7f7;
    box-shadow: 3px 3px 18px #a5a5a5,
              -1px -1px 10px #e2e2e2,
          inset 0px 0px 0px  #a5a5a5,
          inset 0px 0px 0px  #e2e2e2;
    cursor:pointer;
    transition:all 0.4s;
}

.event_con > p:nth-of-type(1) {
    float: left;
    margin-right: 50px;
    position: relative;
}

.event_con > p:nth-of-type(1) img {
    position: absolute;
    left: 28px;
    top: 30px;
}

.event_con > p:nth-of-type(2) {
    float: right;
    position: relative;
}

.event_con > p:nth-of-type(2) img {
    position: absolute;
    right: 28px;
    top: 30px;
}


.event_con > p:nth-of-type(1):hover,
.event_con > p:nth-of-type(2):hover{
    background: #efefef;
    box-shadow: 0px 0px 0px #b5b5b5,
                0px 0px 0px #ffffff,
         inset 5px 5px 10px #b5b5b5,
         inset -5px -5px 5px #ffffff;
}

<div class="event_con">
       <p><img src="https://via.placeholder.com/20x35" alt="pre" width="20" height="35"></p>
       <p><img src="https://via.placeholder.com/20x35" alt="next" width="20" height="35"></p>
</div><!--event_con-->

悬停到插入框阴影的 CSS 框阴影过渡

2 个答案: