Question

在单击时，按钮的顶部似乎有一个默认阴影，您可以在Codepen示例中看到，顶部边缘周围的金色边框变暗-如何删除此行为？

.button {
   cursor:pointer;
   height: 3rem;
   width:10rem;
   margin:15px;
   font-size:2em;
   font-family: Helvetica, Arial, Sans-Serif;
   background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 9%,rgba(102,102,102,1) 20%,rgba(71,71,71,1) 34%,rgba(71,71,71,1) 34%,rgba(44,44,44,1) 45%,rgba(0,0,0,1) 54%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
   text-decoration:none;
   border-radius:10rem;
   border-color:#fcbd3f ;
   border-width: 1.5px;
   color:#d4d6d8 ;
   box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
   outline: none;

   &:active{
      outline: none;
      box-shadow: inset 0px 7px 10px -10px;
      background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
   } 

   &:hover{
      color: white;
      outline: none;
   }
}

button:active{
   outline: none;
   box-shadow: inset 0px 7px 10px -10px;
   background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
}

Answer 1

此代码可解决您的问题：

.button:active {
    border-left-style: solid;
    border-top-style: solid;
}

编辑：或者请检查工作codepen

Answer 2

按钮上的边框是默认边框。侯只调整宽度和颜色，而不调整样式。

因此，通常这样定义按钮： border: 1.5px solid #fcbd3f;

边框的样式是实心的。

按钮活动焦点阴影默认问题

2 个答案: