2

this new CSS3 stuff is so fancy, but the rendering seems to be really inconsistent among browsers (and I'm not even talking about the shadow shape itself)

Here I made an example that looks fabulous in Chrome, but with a jagged border in Firefox: http://jsfiddle.net/eBJxV/4/

Note that I've added a box-shadow and it looks like the background color shines through. For Chrome, there is this workaround with translate3D, is there also something I can do for Firefox?

here's the code you can also see in 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;
}

4

3 回答 3

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/

希望这可以帮助。

于 2015-07-09T17:40:58.553 回答
0

used to this for old Firefox -moz

As like this

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);

}
于 2012-12-06T10:26:12.803 回答
0

解决了这个问题，通过添加一个 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>

于 2016-12-23T11:33:55.403 回答