html - css 转换 :rotate property, 不需要的边框

Question

我正在使用 css transform 属性来旋转网页的 Logo 。 Logo 本身由几个具有相对和绝对位置的内部 div 组成。我有一个外部 div，它包含 ID 为 wholeLogo 的整个东西，我把它放在样式表中以旋转它:

#wholeLogo {
    border: none;
    width: 600px;
    margin: 0 auto;
    margin-top: 15px;
    transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg); 
    -o-transform: rotate(-7deg); 
    -moz-transform: rotate(-7deg); 
}

Logo 已正确旋转，但 wholeLogo div 内的每个 div 周围出现奇怪的虚线边框。有谁知道为什么会发生这种情况以及如何阻止这种情况？

这是请求的 fiddle :

http://jsfiddle.net/CbsUT/1/

如果你想知道为什么每个标志都有两份，那是因为我想要颜色渐变和文字阴影。但这两个东西似乎不能很好地相互配合，所以我用一个复制了一个，另一个复制了另一个，然后将它们重叠。

最坏的情况是我取消旋转它，做一个屏幕截图，在绘画或其他东西中旋转它，然后把它作为图片带回来，但我想尽可能避免这种情况。

Answer 1

试试这个

HTML : -

<div id="wholeLogo">
  <h1 data-title="Logo"> <a href="#">Logo</a> </h1>
</div>

CSS : -

#wholeLogo {
    width: 600px;
    margin: 0 auto;
    margin-top: 35px;
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
}

h1 {
    position: relative;
    font-style: italic;
    font-family: Verdana;
    font-weight:normal;
    text-transform:uppercase;
    font-size:100px;
    text-shadow: 2px 3px 1px #292929;
}

h1 a {
    text-decoration: none;
    position: absolute;
    color: #0032ff;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(20%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

h1 a:hover {
    color: #0032ff;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
}

h1:after {
    color: #dc0000;
    content : attr(data-title);
}