我在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);
}
加载页面后,显示: 按钮 - 黑色边框和上传的图像(我想要), 但是图像和黑色边框之间有一些白线。 看截图。如何修复/删除该行?
关于!
答案 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)
对于背景,而不是图像,将其更改为颜色,然后检查是否仍然出现白色边框 - 答案:我尝试使用海军蓝色,白线无效。