CSS:方框-阴影转换多重阴影
CSS:方框-阴影转换多重阴影
提问于 2020-03-21 03:49:55
所以我有一个初始阴影设置的按钮。我想将悬停时的阴影转换为另一个影子值。
button {
height:100px;
width:200px;
padding:10px;
margin:5px;
border:none;
border-radius:10px;
box-shadow: 10px 10px 20px #dde4ef, -10px -10px 20px white;
transition: box-shadow 0.5s ease-in;
}
button:hover{
box-shadow: inset 10px 10px 20px #dde4ef, inset -10px -10px 20px white;
}<button>This Button</button>
不起作用
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-21 04:05:16
使用inset 0 0 0 transparent, inset 0 0 0 transparent,准备嵌入阴影
button {
height:100px;
width:200px;
padding:10px;
margin:5px;
border:none;
border-radius:10px;
display: inline-block;
box-shadow:
inset 0 0 0 transparent, inset 0 0 0 transparent, /* Prepared inset shadows */
10px 10px 20px #dde4ef, -10px -10px 20px white; /* Outer shadows */
transition: box-shadow 0.5s ease-in;
}
button:hover{
box-shadow: inset 10px 10px 20px #dde4ef, inset -10px -10px 20px white;
}<button type="button">HOVER ME</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60784303
复制相关文章
相似问题
腾讯云开发者
