所有浏览器的css 3形状校正

那么，在Firefox中，所有css 3形状都不能正确呈现颜色吗？我用了这个发电机 制作三角形时，我注意到当使用较大的值时，Firefox中的边缘会模糊，因此我需要使用border style:inset使边框非常锐利……但是如果使用border syle:inset，我还注意到Firefox上的颜色会变成pantone，或者严重不饱和。铬的颜色很好。Firefox中的颜色是否需要修正

border-width: 0 0 351px 5527px;
border-color: transparent transparent #ff0000 transparent;
border-style:inset;

---

在这把小提琴中，你可以看到FF（在电脑上！）的颜色不是红色，而是一种去饱和的颜色。铬的颜色很好。如果你去掉边框样式：插入，颜色在FF中再次变成完全红色，但顶部边框有阴影/渐变/不清晰实际上，这是FireFox的设计者有意设置的。Firefox的呈现方式与其他浏览器不同（就像大多数浏览器一样），在这种情况下，呈现方式不太理想

我想不出使用CSS或javascript会增加红色的亮度，而不会影响红色上方的其他空间

虽然我不知道有什么直接的修复方法，但是你可以通过只在FireFox中接受一点模糊来消除这种淡而无味的颜色，并通过使用下面的javascript让它在其他浏览器中完美地工作

if(navigator.appCodeName == "Mozilla")
    document.querySelectorAll("div")[0].style.borderStyle = "solid";

---

据我所知，唯一的其他解决方法是使用不同的工具来创建所需的设计，最有可能是图像、

或SVG。所有这些都是您问题的可靠解决方案，尽管不可否认，如果所有浏览器都以相同的方式呈现CSS，那么它们的呈现效果就不那么理想了

它们的呈现方式与FireFox中的呈现方式完全相同，但FireFox呈现方式与其他浏览器不同（就像其他浏览器呈现方式不同一样）。据我所知，没有解决办法，如果你愿意，请联系Mozilla。我只是惊讶地发现，在所有使用css3形状的新站点中，它们要么在FF中有奇怪的阴影，要么没有显示正确的颜色？！如果我使用border style:inset使边框锐利，有没有办法用JS使边框成为饱和颜色？不确定边框样式：inset既能使FF上的边框锐利，又能降低颜色的饱和度，但如果我能用JS使颜色饱和，那就太完美了！好吧，现在，分割网站的部分，而不是一条线，它是一条有点角度的线…现在我用一个巨大的png图像来做这件事。我想纯css选项不会在所有浏览器中都起作用。我很好奇不是纯css的加载时间，那么svg会比一个巨大的png图像更轻吗？我知道画布可能会变得很慢…我也可能会扭曲一个div，而不是制作一个带有css边框的三角形…实际上，看起来你只能制作一个带有边框的三角形，而不是扭曲…我可以用svg来做，但我还需要它是一个包含信息/文本和两个以上重复背景的容器。。。我想画布可能太重了，我想我可能会在找到/编辑这个有趣的解决方案的时候使用一个巨大的图像。。。如果有人想找到它或有信息要添加到其中，想发布它！？如果它只是一条直线，你可以简单地旋转一个div，绝对地定位它，这基本上就是我在上面的小提琴中所做的。假装它是一个完整的盒子，然后在下面添加一个普通的盒子来填充空间。我想知道的是，对于一个覆盖整个浏览器宽度的间隔，这是一个更好的解决方案，还是使用一个巨大的png会对浏览器更友好。或者，如果我在站点的很多部分使用了一个巨大的png，那么使用上面的解决方案是否比使用一个巨大的png加载时间更好