css transform:rotate 属性，不需要的边框答案

【问题标题】：css transform:rotate property, unwanted bordercss transform:rotate 属性，不需要的边框
【发布时间】：2012-08-30 20:13:06
【问题描述】：

我正在使用 css 转换属性来旋转网页的徽标。 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); 
}

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

这里是小提琴请求：

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

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

最坏的情况是我取消旋转它，进行屏幕截图，用油漆或其他方式旋转它，然后将它作为图片带回来，但如果可能的话，我想避免这种情况。

【问题讨论】：

我们可以看看小提琴吗？如果你不旋转它会发生什么？
也许是内部 div 的像素在旋转时没有完全对齐 - 'border' 是后面 div 的颜色吗？
@Passerby。小提琴被添加。不旋转时没有边框。
@zenkaty：我认为你正在做一些事情。我在图片上使用了一些颜色渐变，我认为它正在渗透。奇怪的是它的边框是虚线的。
看了一下小提琴，是的，它肯定是渐变形状的边缘“流血”了。由于您的 z-index 设置，颜色位于包含形状的顶部，所以我想不出任何方法来“覆盖”它......对不起！

标签： html css

【解决方案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);
}

【讨论】：