0

我正在使用 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); 
}

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

这是小提琴要求：

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

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

最坏的情况是我取消旋转它，做一个屏幕截图，用油漆或其他东西旋转它，然后把它作为图片带回来，但如果可能的话，我想避免这种情况。

4

1 回答 1

0

试试这个

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);
}
于 2012-09-06T06:39:36.557 回答