我不相信BoxShadow正在代碼2上正確應用

Question

我不相信Box-Shadow正在正確應用代碼2.有人可以告訴我我做錯了什麼嗎？他們都使用Box Shadow。

這是奇怪的原因，如果他們都以同樣的方式應用，是什麼導致第二個代碼行爲不同？我似乎無法弄清楚。

任何人都可以爲我解決這個問題嗎？

代碼1和代碼2

https://jsfiddle.net/1xmkespg/5/

代碼1：

https://jsfiddle.net/1xmkespg/10/

代碼2：

https://jsfiddle.net/1xmkespg/12/

代碼2：

<button id="playButton4" style="display:block; width: 266px; height: 266px; cursor: pointer;background-image: linear-gradient(to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px); border: 3px solid #0059dd;" 
 
onclick=" 
 
    var button = document.getElementById('playButton4'); 
 
    var player = document.getElementById('player4'); 
 
     document.querySelector('#playButton4 .initial').style.display='none'; 
 
     document.querySelector('#playButton4 .pause').style.display='none'; 
 
     document.querySelector('#playButton4 .play').style.display='none'; 
 
    player.volume=1.0; if (player.paused) { 
 
playButton4.style.background = 'linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px), url(\'https://via.placeholder.com/266x266\')'; 
 
    playButton4.style.padding = '94px 100px 94px 100px'; 
 
    playButton4.style.cursor = 'pointer'; 
 
    playButton4.style.boxShadow='inset 0 0 0 20px #e77d19'; 
 
    playButton4.style.backgroundRepeat = 'no-repeat'; 
 
    playButton4.style.backgroundPosition = 'center'; 
 
    document.querySelector('#playButton4 .pause').style.display='inline-block'; 
 
    player.play(); 
 
    } else { 
 
playButton4.style.background = 'linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px), url(\'https://via.placeholder.com/266x266\')'; 
 
    playButton4.style.padding = '94px 100px 94px 100px'; 
 
playButton4.style.boxShadow='inset 0 0 0 20px #e77d19'; 
 
    playButton4.style.cursor = 'pointer'; 
 
    playButton4.style.backgroundRepeat = 'no-repeat'; 
 
    playButton4.style.backgroundPosition = 'center'; 
 
    document.querySelector('#playButton4 .play').style.display='inline-block'; 
 
    player.pause(); 
 
    }"> 
 

 
    <svg class="initial" width="90" height="108" viewbox="0 -3 85 120"> 
 
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path> 
 
    </svg> 
 

 
    <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14"> 
 
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" 
 
    fill="#1ed760 " fill-rule="evenodd"></path> 
 
    </svg> 
 

 
    <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14"> 
 
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path> 
 
    </svg> 
 

 
</button> 
 

 
<audio id="player4" style="display:none;"> 
 
    <source src='' type='audio/mpeg'></source> 
 
</audio>

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.