有一些 CSS 按钮效果无法跨浏览器工作的问题。
它在 Chrome 中按我希望的方式显示,但在 Firefox 中不显示。
似乎找不到问题的根源。这是我所拥有的。
a.soft {
display: inline-block;
font-family: 'Varela Round', sans-serif;
padding: 2rem 3rem;
font-size: 1.25vw;
box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #ABABAB;
border-radius: 50px;
transform: box-shadow 1s ease-in-out;
background-color: #666666;
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(245, 245, 245, 1.0) 2px 2px 5px;
font-weight: bolder;
}
a.soft:hover {
background-color: #ddd;
box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #ABABAB;
color: #888;
}
a.soft:active {
box-shadow: 0 0 20px 0 #E6E6E6, 0 0 20px 0 #ABABAB, inset 0 0 20px 0 #E6E6E6, inset 0 0 20px 0 #ABABAB;
color: #D8D8D8;
text-shadow: 1px 1px 2px white;
-webkit-background-clip: text;
font-weight: bolder;
}
<a class="soft">Button</a>
最佳答案
我设法找到了一个 firefox 特定的规则,它纠正了所有问题。
@-moz-document url-prefix() {
a.soft {
background-color: #ddd;
box-shadow: -10px -10px 20px 0 #E6E6E6,
10px 10px 20px 0 #ABABAB,
inset 10px 10px 20px 0 #E6E6E6,
inset -10px -10px 20px 0 #ABABAB;
color: #888;
}
}
关于html - CSS 按钮效果不能跨浏览器工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59524537/