3

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

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

带着敬意！

在此处输入图像描述

4

7 回答 7

3

我在使用按钮时遇到了类似的问题。默认情况下，单击它们时会出现大约 1px 的边框。尝试将此添加到您的按钮类：

button {
     outline: 0;
}
于 2020-11-14T13:04:38.920 回答
2

我发现在 css 中简单地切换焦点按钮可以摆脱这种情况，因为按钮在被点击后会自动成为焦点。并且在焦点之后添加了一个大纲：

<button> Hello there </button>

/ CSS脚本/

.button:focus { outline:none; }

于 2021-01-07T22:30:21.940 回答
1

尝试：

border-style:none;

大多数，如果不是所有元素都以某种方式获得浏览器的默认样式。

于 2020-08-08T13:34:49.753 回答
0

改变

border:1px solid black inherit;

至

border:1px solid black;

从属性中删除inherit关键字border

于 2012-11-13T05:32:49.457 回答
0

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

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

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

希望能帮助到你！

于 2012-11-13T05:49:45.483 回答
0

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

在此处输入图像描述

于 2012-11-13T05:52:10.717 回答
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);
}
于 2021-08-07T14:20:29.483 回答