html - 背景灰色的 CSS 问题导致蓝色按钮具有白色轮廓

Question

如图所示，我标有“新任务”和“新笔记”的按钮完全没问题，但由于灰色背景，提交和取消有一些奇怪的白色阴影阴影？

所以我的猜测是我的按钮蓝色与背景样式相结合一定会导致问题吗？

下面:屏幕上按钮的 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

尝试放置 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;
}