代码之家 › 专栏 › 技术社区 › user3108268

css skew和transform在chrome和edge上添加了不需要的轮廓

css-transforms webkit css3 css html

0

user3108268 · 技术社区 · 8 年前

如本例所示 https://jsfiddle.net/xozytmbv/5/ 有一个奇怪的1倍深的边界(我想背景是 #nav 项目。最初它出现在所有浏览器中。

我通过添加 translateZ(1px) 如图所示 Unwanted outline on border when parent is transformed 但它不适用于铬或边缘。

#nav {
    background-color: #183650;
    overflow: hidden;
}
ul {
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}
li {
    padding: 9px 0;
  list-style: none;
}
li.last,
li.first {
    background: none transparent;
    position: relative;
}
li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}
li a {
    border: none;
    color: #FFF;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 1px;
    padding: 0.75em 0.7em;
}
li.last {
    background-color: #20bef2;
    border-left: 3px solid #FFF;
}
li a {
  text-decoration: none;
}
li a:hover {
    background: none transparent;
}
li:last-child {
    background-color: #20bef2;
    transform: translateZ(1px) skew(-15deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
li:last-child a {
    transform: translateZ(1px) skew(15deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

Firefox(按需):

铬和边缘:

边界不仅在右侧可见,而且在顶部和底部可见,超出了 li.last .

1 回复 | 直到 8 年前

1

2

Temani Afif 8 年前

调整 :after 元素要有重叠并避免这种情况。如此纵横 left:100% 成功 left:0 并调整 z-index :

#nav {
  background-color: #183650;
  overflow: hidden;
}

ul {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

li {
  padding: 9px 0;
  list-style: none;
}

li.last,
li.first {
  background: none transparent;
  position: relative;
}

li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /*changed this */
  z-index:-1; /*Added this*/
  width: 100vw;
  height: 100%;
  background-color: #20bef2;
}

li a {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 1px;
  padding: 0.75em 0.7em;
}

li.last {
  background-color: #20bef2;
  border-left: 3px solid #FFF;
}

li a {
  text-decoration: none;
}

li a:hover {
  background: none transparent;
}

li:last-child {
  background-color: #20bef2;
  transform: translateZ(1px) skew(-15deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

li:last-child a {
  transform: translateZ(1px) skew(15deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

<div id="nav">
  <ul>
    <li class="first"><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="last"><a href="#">Item</a></li>
  </ul>
</div>