html - Chrome：Div 中间有白线

Question

出于某种原因，Chrome 正在渲染我的一个 div，其中一条白线直接穿过中间。我在下面提供了一张图片。在 Firefox 悬停中看起来不错。

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 的地方使用 135deg，在应该使用 135deg 的地方使用 315deg。您会看到一条线，因为您的背景正好在 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

这个网站让我相信你应该使用background-image:而不是background:使用径向渐变。