css 更改背景颜色后按钮不工作

jm81lzqq  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(326)

我在修改按钮的背景色时遇到了一个问题。在我设置了背景色之后,按钮“失效”了,我的意思是我不能点击它。下面是css中的代码:

button {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0); 
    margin: 20px;
    width: 70px;
    height: 70px;
    border-radius: 70px;
    border-style: none;
    background-color: white;
}
68bkxrlz

68bkxrlz1#

更改背景颜色后按钮无法单击的问题可能是由于“border-style”属性设置为“none”。此属性删除按钮周围的默认边框,这也会删除可单击区域。

button {
 position: relative;
 left: 50%;
 transform: translate(-50%, 0); 
 margin: 20px;
 width: 70px;
 height: 70px;
 border-radius: 70px;
 border-style: solid; /* changed from none */
 border-width: 1px; /* added this */
 background-color: white;
}

或者你可以给按钮添加一个“box-shadow”属性,给予它一个可点击的区域,这将在按钮周围创建一个阴影

button {
 position: relative;
 left: 50%;
 transform: translate(-50%, 0); 
 margin: 20px;
 width: 70px;
 height: 70px;
 border-radius: 70px;
 border-style: none;
 background-color: white;
 box-shadow: 0px 0px 10px #000000; /* added this */
}

相关问题