问题与按钮周围的边框 - CSS

Question

我在css中有一个装饰按钮的问题：

CSS文件中的代码是：

button
{

   font-family: Tahoma;
   color: #FFFFFF;
   font-size: 13px;
   font-weight: bolder;
   width: 180px;
   height: 50px;
   border:1px solid black inherit;
   background-repeat: no-repeat;
   margin: 0 10px;
   position: relative;
   background: url(C:/w3schools_demo/willpower/Images/button1.PNG);
}

加载页面后，显示： 按钮 - 黑色边框和上传的图像（我想要）， 但是图像和黑色边框之间有一些白线。 看截图。如何修复/删除该行？

关于！

Answer 1

使用按钮时，我遇到了类似的问题。单击它们时，默认情况下会出现一个约1像素的边框。尝试将其添加到您的按钮类中：

# training on the complete dataset and learning_rate == 0
opt = keras.optimizers.Adam(learning_rate = 0)
model.compile(optimizer = opt, loss='categorical_crossentropy', metrics=['categorical_accuracy'])

model.fit(trainX, trainy, validation_data = (trainX, trainy), batch_size = 32, 
          shuffle = False, validation_batch_size = 32, epochs = 5)

# set the learning_rate to zero and again you'll get loss == val_loss

Answer 2

我发现在 css 中简单地切换焦点按钮可以解决这个问题，因为按钮在被点击后会自动获得焦点。并且在焦点后面加了一个大纲：

<button> Hello there </button>

/CSS 脚本/

.button:focus { outline:none; }

Answer 3

变化

border:1px solid black inherit;

到

border:1px solid black;

从inherit属性

中删除border个关键字

Answer 4

设计网页时的一个问题是浏览器解释代码的方式不同，因为它们采用不同的方式。 我通常在启动时采用的一种方法是添加以下css以避免浏览器提供的任何默认设置。

html,body,li,ul,img,form,h1,h2,h3,h4,h5,h6,hr{ margin:0px; padding:0px; }

在您的情况下，可能是img元素或button元素缺少padding属性。 也可能是您的图像小于180px / 50px。

希望它有所帮助！

Answer 5

尝试：

border-style:none;

大多数（如果不是全部的话）的元素将通过浏览器以某种方式获得默认样式。

Answer 6

button {
   font-family: Tahoma;
   color: #FFFFFF;
   font-size: 13px;
   font-weight: bolder;
   width: 180px;
   height: 50px;
   border:1px solid black inherit;
   /* this should work if any one encounters this problem ? */

   border: none;

   background-repeat: no-repeat;
   margin: 0 10px;
   position: relative;
   background: url(C:/w3schools_demo/willpower/Images/button1.PNG);
}

Answer 7

对于背景，而不是图像，将其更改为颜色，然后检查是否仍然出现白色边框 - 答案：我尝试使用海军蓝色，白线无效。