Question

这个新的CSS3的东西是如此的花哨，但渲染似乎在浏览器之间真的不一致（我甚至不谈论阴影形状本身）

在这里，我做了一个在Chrome中看起来很棒的例子，但在Firefox中有一个锯齿状的边框： http://jsfiddle.net/eBJxV/4/

请注意，我添加了一个框阴影，它看起来像背景颜色。对于Chrome，有一个使用translate3D的解决方法，我还可以为Firefox做些什么吗？

这里是您在JSFiddle中可以看到的代码



h1 {
    background-color: #E8501F;
    border-radius: 13px 0 0 13px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
    display: block;
    font-size: 18px;
    height: 30px;
    letter-spacing: 0.03em;
    padding: 0 20px;
    text-transform: uppercase;

    transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
    transform: rotate(-4deg) translate3d( 0, 0, 0);


    -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0);

    margin:10px 0;
    width:100px;
    font-weight:bold;
    font-family:Verdana;
    color:#ffffff;
}

body{
background-color:#FFF;
}

h1 { background-color: #E8501F; border-radius: 13px 0 0 13px; box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3); display: block; font-size: 18px; height: 30px; letter-spacing: 0.03em; padding: 0 20px; text-transform: uppercase; transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0); transform: rotate(-4deg) translate3d( 0, 0, 0); -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0); -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0); margin:10px 0; width:100px; font-weight:bold; font-family:Verdana; color:#ffffff; } body{ background-color:#FFF; }

Answer 1

您可以使用CSS过滤器修复它：

filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');

这是jsfiddle：

http://jsfiddle.net/eBJxV/14/

请注意，此信息（以及更多信息）在我之前就此主题撰写的博文中有所体现：

http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

希望这有帮助。

Answer 2

用于此旧 Firefox -moz

就像这样

h1 {

    -moz-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -moz-transform: rotate(-4deg) translate3d( 0, 0, 0);

}

Answer 3

通过添加带有1px和相同背景颜色的边框来解决它。然后以不同方式应用box-sizing，指出边框是大小的一部分。然后由于填充，不得不改变宽度。

http://jsfiddle.net/eBJxV/19/

h1 {
    background-color: #E8501F;
    border-radius: 13px 0 0 13px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
    display: block;
    font-size: 18px;
    height: 30px;
    letter-spacing: 0.03em;
    padding: 0 20px;
    text-transform: uppercase;
    border-style: solid;
    border-color: #E8501F;
    border-width:1px;
    transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
    transform: rotate(-4deg) translate3d( 0, 0, 0);
    
    box-sizing: border-box;
    outline: 1px solid transparent;
    
    -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0);

    margin:10px 0;
    width:140px;
    font-weight:bold;
    font-family:Verdana;
    color:#ffffff;
}

body{
    background-color:#FFF;
}

   <h1>JSFiddle</h1>
   <h1>Shiddle</h1>

奇怪的Firefox渲染（css转换）

3 个答案: