CSS box-shadow transition

问题:

I have several div elements on my website that are part of a class that has an inset box-shadow. When I hover over those div boxes, I want the inset property removed from the box-shadow, and I want it to transition to an outward shadow. However, though the shadow changes correctly, it doesn't transition during the change. It just instantly switches shadows. How do I fix this?

Here's the 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> 

And here's the 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; } 

回答1:

You can not transition from a normal box shadow to a inset box shadow.

Luckily, you can set multiple box shadows, so you can write

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

and

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

Notice that these shadows are the same that the ones that you had, because the extra shadow has 0px, so won't be displayed. Notice also that the order is important: the browser will transition it only if the first shadow is inset (or normal) in both, the second one is inset (or normal) in both, and so on

fiddle

I have removed the transitions in the hover state, you don't need to repeat them.

文章来源: CSS box-shadow transition