Question

我想知道为什么阴影盒无法正常工作。是否可以使它从按钮的中心扩展到其他位置？

谢谢

.slide {
  -webkit-transition: ease-out 0.3s;
  -moz-transition: ease-out 0.3s;
  transition: ease-out 0.3s;
  box-shadow: inset 0 0 0 0 #000;
  padding: 20px 40px 20px 40px;
}

.slide_inside:hover {
  box-shadow: inset 0 0 0 50px #000;
  background: initial;
}

.slide_outside:hover {
  box-shadow: inset 0 0 0 -50px #000;
  background: initial;
}

<h6>Inside</h6>
<a href="#">
  <button class="slide slide_inside">Button</button>
</a>
<h6>Outside</h6>
<a href="#o">
  <button class="slide slide_outside">Button</button>
</a>

Answer 1

要使阴影移到外面，您需要除去插入物，这暗示着插入物，这就是为什么没有outset关键字的原因，并且您知道您无法将属性从无过渡到必须过渡有一个初始值，这就是为什么我们从一开始就没有开始的原因。

body {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.slide {
  -webkit-transition: ease-out 0.3s;
  -moz-transition: ease-out 0.3s;
  transition: ease-out 0.3s;
  box-shadow: none 0 0 0 0 #000;
  padding: 20px 40px 20px 40px;
}

.slide_inside:hover {
  box-shadow: inset 0 0 0 50px #000;
  background: initial;
}

.slide_outside:hover {
  box-shadow: 0 0 0 50px #000;
  background: initial;
}

<h6>Inside</h6>
<a href="#">
  <button class="slide slide_inside">Button</button>
</a>
<h6>Outside</h6>
<a href="#o">
  <button class="slide slide_outside">Button</button>
</a>

Answer 2

如果要使内部成为外部阴影，可以组合多个box-shadow

.slide {
  transition: linear 0.3s;
  box-shadow: 
    inset 0 0 0 30px #000,
     0 0 0 0px #000;
  padding: 20px 40px 20px 40px;
  margin:50px;
  color:#fff;
}


.slide_outside:hover {
  box-shadow: 
    inset 0 0 0 0px #000,
    0 0 0 30px #000;
  color:#000;
}

<h6>Outside</h6>
<a href="#o">
  <button class="slide slide_outside">Button</button>
</a>

框阴影动画

2 个答案: