Chrome：Div在中心有白线

Question

出于某种原因，Chrome正在渲染我的一个div，白线直接穿过中间。我在下面提供了一张图片。它在Firefox hover中看起来没问题。

HTML：

 <div class="corners">
<center><h2 class="featurette-heading3">What Are BnD'z Hours Of Operation?       </h2>
</center>
<ul class=""> 
<li>Monday-Thursday 6:00AM &mdash; 9:00PM </li>
 <li>Friday 6:00AM &mdash; 10:00PM</li>
 <li>Saturday 11:00AM &mdash; 10:00PM</li>
  <li>Sunday 11:00AM &mdash; 8:00PM </li>
  <br></div>

这是我的CSS：

.corners {
background: #cc0000; /* fallback */
background:
    -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
    -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
    -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
    -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
    -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
    -o-linear-gradient(135deg, transparent 10px, #c00 10px),
    -o-linear-gradient(225deg, transparent 10px, #c00 10px),
    -o-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
    -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

.corners.round {
background:#;
background:
    -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
    -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
    -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
    -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
     -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
     -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}

.corners, .corners.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.corners {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}

Answer 1

首先，你的角度是错误的。你使用315deg你应该使用315deg你使用315deg你应该使用135deg。你看到一条线，因为你的背景正好以50％结尾，浏览器因图像边缘出现问题而臭名昭着，而且很可能是一个四舍五入的差异。

以下是更正后的CSS：

.corners h2 { text-align:center;}
.corners {
    background: #cc0000;
    /* fallback */
    background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px);
    background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px);
    background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px);
    background: linear-gradient(45deg, transparent 0px, transparent 10px, #c00 10px), linear-gradient(315deg, transparent 10px, #c00 10px), linear-gradient(225deg, transparent 0px, transparent 10px, #c00 10px), linear-gradient(135deg, transparent 0px, transparent 10px, #c00 10px);
}

.corners, .corners.round {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 51% 51%;
    -webkit-background-size: 51% 51%;
    background-size: 51% 51%;
    background-repeat: no-repeat;
}
.corners {
    width: 500px;
    margin:15px auto;
    padding:13px 15px;
    color: white;
    line-height:1.5;
}

更新了HTML：

<div class="corners">
    <h2 class="featurette-heading3">What Are BnD'z Hours Of Operation?</h2>
    <ul class="">
        <li>Monday-Thursday 6:00AM &mdash; 9:00PM</li>
        <li>Friday 6:00AM &mdash; 10:00PM</li>
        <li>Saturday 11:00AM &mdash; 10:00PM</li>
        <li>Sunday 11:00AM &mdash; 8:00PM</li>
    </ul>
</div>

http://jsfiddle.net/k7UGz/9/

我增加了背景大小，以便稍微重叠以消除浏览器问题（Linux上的Chrome）不能精确计算出50％以完全覆盖。

Answer 2

This网站让我相信，在使用径向渐变时，您应该使用background-image:而不是background:。