CSS问题与背景灰色导致蓝色按钮有白色轮廓

Question

由于图像显示我的按钮标记为New Task，New Note完全正常但是由于灰色背景而提交和取消有一些奇怪的白色阴影阴影？

所以我的猜测是我的按钮蓝色着色与背景中的样式相结合必然会引起问题？

下面：屏幕上按钮的CSS样式（还没有JS影响这个页面），HTML非常基本。

.btn {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    outline-color: #808080;
    font-family:Arial, Tahoma, Verdana, "Times New Roman", sans-serif;
    font-size:12px;
    font-weight:normal;
}

.btn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}

谢谢你们！

Answer 1

将以下CSS添加到现有的.button课程中。这是一个边框导致默认按钮出现问题。

.btn {
  border:none;
)

Answer 2

尝试使用border-style：none

您的代码

.btn {
    border-style: none; // just add this one :)
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    outline-color: #808080;
    font-family:Arial, Tahoma, Verdana, "Times New Roman", sans-serif;
    font-size:12px;
    font-weight:normal;
}

.btn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}

Answer 3

您需要更改或删除按钮中的默认border。

.btn {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border: 0;
    border-radius: 28px;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    outline-color: #808080;
    font-family:Arial, Tahoma, Verdana, "Times New Roman", sans-serif;
    font-size:12px;
    font-weight:normal;
}

Answer 4

将border: none;添加到.btn类这里我已经更新了css试试这个

＆＃13;

＆＃13;

.btn {
    border: none;
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    outline-color: #808080;
    font-family:Arial, Tahoma, Verdana, "Times New Roman", sans-serif;
    font-size:12px;
    font-weight:normal;
}

＆＃13;

＆＃13;

＆＃13;