Question

我是否必须使用图像制作这种...我甚至不知道如何解释它（我的母语不是英语），但它是从顶部到较暗部分的过渡这个网站： http://thegregthompson.com/ 。我有使用图片，还是可以使用非过于复杂的CSS进行此操作？（伪元素很好）

Answer 1

最好的方法是使用图像。你可以在canvas元素中做一些高级的Javascript，但这是漫长，艰难和不必要的方式。

该网站使用this image

Answer 2

如果您指的是锯齿状的边缘/迷你三角形，那么在更简单的时间内，您可以更好地使用重复的http://thegregthompson.com/wp-content/themes/GregThompson/assets/img/border-top.png重新创建它。

我确信在纯粹的CSS中它是可能的，但它肯定不会“不要过于复杂”，我首先想到的是会有很多不必要的标记。

我希望这会有所帮助

Answer 3

这就是他们正在使用的：

.sub_hold_top {
    height: 10px;
    background-image: url('../img/border-top.png');
    width: 100%;
    float: left;
}