Question

我用于换色标题文本的代码（我的颜色更改按钮也使用相同的代码）在Chrome中的文本周围创建了一个不需要的轮廓，但在其他浏览器（IE，Edge，Firefox）中只有文本出现（这是预期的）。

我相信这可能是因为我对按钮和标题使用相同的代码。但如果是这种情况，那么我不确定是什么原因导致代码在Chrome中表现不同，但在其他浏览器中却没问题。

该网站在此处上传： http://www.maximiles.co.uk/images/dynamics/uk/bilendiloyalty3/index.html

我的代码在这里： http://codepen.io/Dingerzat/pen/BQZGLe

颜色变化的代码：

<!-- html -->
<h2 class="color_button">We enhance brand loyalty</h2>

/* CSS */
.enquire_button {
  min-height: 2em;
  width: 7em;
  background-color: white;
  border: 4px solid #f35626;
  border-radius: 5px;
  color: #f35626;
  cursor: pointer;
  font-size: 2em;
line-height: 2em;
  -webkit-transition: color .4s;
  -o-transition: color .4s;
  transition: color .4s;
    -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
  text-align: center;
}  
.color_button {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% { color: #da6e16; border: 4px solid #da6e16; }
  25% { color: #82da16; border: 4px solid #82da16; }
  50% { color: #16dad0; border: 4px solid #16dad0; }
  75% { color: #d41a82; border: 4px solid #d41a82; }
  100% { color: #d41a82; border: 4px solid #d41a82; }
}
@-moz-keyframes color_change {
  0% { color: #da6e16; border: 4px solid #da6e16; }
  25% { color: #82da16; border: 4px solid #82da16; }
  50% { color: #16dad0; border: 4px solid #16dad0; }
  75% { color: #d41a82; border: 4px solid #d41a82; }
  100% { color: #d41a82; border: 4px solid #d41a82; }
}
@-ms-keyframes color_change {
  0% { color: #da6e16; border: 4px solid #da6e16; }
  25% { color: #82da16; border: 4px solid #82da16; }
  50% { color: #16dad0; border: 4px solid #16dad0; }
  75% { color: #d41a82; border: 4px solid #d41a82; }
  100% { color: #d41a82; border: 4px solid #d41a82; }
}
@-o-keyframes color_change {
  0% { color: #da6e16; border: 4px solid #da6e16; }
  25% { color: #82da16; border: 4px solid #82da16; }
  50% { color: #16dad0; border: 4px solid #16dad0; }
  75% { color: #d41a82; border: 4px solid #d41a82; }
  100% { color: #d41a82; border: 4px solid #d41a82; }
}
@keyframes color_change {
  0% { color: #da6e16; border: 4px solid #da6e16; }
  25% { color: #82da16; border: 4px solid #82da16; }
  50% { color: #16dad0; border: 4px solid #16dad0; }
  75% { color: #d41a82; border: 4px solid #d41a82; }
  100% { color: #d41a82; border: 4px solid #d41a82; }
}

Answer 1

为.color_button类添加边框

.color_button
{
   border:solid;

Answer 2

在关键帧中，仅声明border-color而不是整个边框样式。然后，在使用相同关键帧并需要边框的任何其他元素中，确保原始元素具有适当宽度的边框样式。

@keyframes color_change {
  0% { color: #da6e16; border-color:#da6e16; }
  25% { color: #82da16; border-color:#82da16; }
  50% { color: #16dad0; border-color:#16dad0; }
  75% { color: #d41a82; border-color:#d41a82; }
  100% { color: #d41a82; border-color:#d41a82; }
}

（当然加上所有供应商前缀样式的相同变化。）

Chrome中的文本周围出现了不需要的框，但其他浏览器没有

2 个答案: