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

时间:2012-11-13 05:27:12

标签: html css web-applications dhtml

我在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);
}

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

关于!

enter image description here

7 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

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

<button> Hello there </button>

/CSS 脚本/

.button:focus { outline:none; }

答案 2 :(得分:0)

变化

border:1px solid black inherit;

border:1px solid black;

inherit属性

中删除border个关键字

答案 3 :(得分:0)

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

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

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

希望它有所帮助!

答案 4 :(得分:0)

尝试:

border-style:none;

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

答案 5 :(得分:0)

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);
}

答案 6 :(得分:-1)

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

enter image description here