css - 对 Angular 渐变的平滑线条和替代方法

http://www.jsfiddle.net/3vjaxf3p/

我想将整个网页的背景作为渐变色。但是在大多数浏览器中，彩色部分之间的线条并不平滑。有1px的小间隙，架子（您知道）。是否可以使这些线条平滑？

作为替代，倾斜div的技术可以使线条流畅。

http://www.jsfiddle.net/6bujer9k/

的HTML：

<div class="mainContainer">
    <div class="sector firstSector"></div>
    <div class="sector secondSector"></div>
    <div class="sector thirdSector"></div>
    <div class="sector fourthSector"></div>
    <div class="sector fifthSector"></div>
    <div class="sector sixthSector"></div>
    <div class="sector seventhSector"></div>
    <div class="sector eigthSector"></div>
    <div class="sector ninthSector"></div>
</div>

CSS：

body {
    overflow: hidden;
}

div.mainContainer {
    width: 150%;
    height: 780px;
    position: absolute;
    top: -80px;
    left: -300px;
}

div.sector {
    display: inline;
    float: left;
    height: 100%;
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
}

div.firstSector {
    width: 9.75%;
    background-color: #94C4FF;
}

div.secondSector {
    width: 11.5%;
    background-color: #FFE6BE;
}

div.thirdSector {
    width: 11.5%;
    background-color: #94C4FF;
}

div.fourthSector {
    width: 11.5%;
    background-color: #FFE6BE;
}

div.fifthSector {
    width: 11.5%;
    background-color: #94C4FF;
}

div.sixthSector {
    width: 11.5%;
    background-color: #FFE6BE;
}

div.seventhSector {
    width: 11.5%;
    background-color: #94C4FF;
}

div.eigthSector {
    width: 11.5%;
    background-color: #FFE6BE;
}

div.ninthSector {
    width: 9.75%;
    background-color: #94C4FF;
}

我认为这更合适。我还想
在悬停时动态更改此部分的宽度，并用一些内容填充它们。为“过渡动画”目的而使用渐变是完全不好的主意吗？

最佳答案

好吧，我尝试将背景作为重复的渐变色，但是我认为要显示内容，要控制背景的特定部分的大小来扩展它真的很困难。如果您坚持使用可以在悬停时更改的单独元素，则可以更好地控制。

另外，div.sector是否具有display：inline;的特殊原因？它已经浮动到左侧，因此它的行为就像一个块元素，也无需声明为内联。
希望对您有所帮助，如果我对您的理解不正确，请告诉我。

关于css - 对 Angular 渐变的平滑线条和替代方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25815753/