Question

我在创建倾斜的导航时遇到了问题，实际上，除了导航项链接之间的奇怪间隙之外，其他一切都很好。我做了一些研究，发现这是因为使用了抗锯齿技术。

我试图用:: before选择器和/或将border-right属性应用于该块，但没有成功。

有代码：

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: #1d1e22;
  overflow: hidden;
}

ul {
  margin-left: 5%;
  position: relative;
}

ul li {
  float: left;
  list-style: none;
}

ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  background: #444857;
  transform: skew(-20deg);
  transition: all 300ms ease-in-out;
}

ul li a:hover {
  background: #fff;
  color: #000;
}

ul li a span {
  transform: skew(20deg);
  display: block;
}

<header>
   <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About us</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>  
</header>

我希望它只有一个音调，没有黑洞。如果您知道如何修复，请与我们分享。

Answer 1

这里的问题是浏览器如何处理亚像素渲染。在变换形状时，浏览器会在形状的边缘应用一些抗锯齿功能，以实现更平滑的渲染。

因此，不能保证两个元素的边缘会完美对齐。参见interesting article about it。

最快的解决方法是应用一些负边距，以便形状重叠。

country = tree.xpath("//div[contains(., 'Australia')]")

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: #1d1e22;
  overflow: hidden;
}

ul {
  margin-left: 5%;
  position: relative;
}

ul li {
  float: left;
  list-style: none;
  margin-left: -2px;
}

ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  background: #444857;
  transform: skew(-20deg);
  transition: all 300ms ease-in-out;
}

ul li a:hover {
  background: #fff;
  color: #000;
}

ul li a span {
  transform: skew(20deg);
  display: block;
}

Answer 2

我在box-shadow: 1px 0 1px #444857标记中添加了<a>； https://cloud.google.com/sql/docs/mysql/connect-external-app

反锯齿在偏航中造成奇怪的差距

2 个答案: