【发布时间】：2021-09-16 11:27:32
【问题描述】：
以下样式链接有两个问题。
- 悬停时链接的左右两侧会显示一个小的白色边框。
-
::before边框半径在 Webkit 浏览器的过渡期间应用。所有其他浏览器都在转换之前应用它。
我尝试为各种元素调整 z 索引，但这对小白边问题没有任何影响。
我已尝试将边框半径应用于a::before 和a:hover::before 以查看是否可以解决 Webkit 浏览器中的问题，但没有运气。
关于为什么会出现这些 CSS 问题的任何想法？
body {
background-color: #1A1A1A;
padding: 3rem;
}
.cta {
display: inline-block;
text-decoration: none;
font-weight: 700;
font-size: 1.125rem;
font-family: "Barlow", sans-serif;
letter-spacing: -0.0225rem;
color: #D61E15;
}
.cta--pill {
padding: 0.625rem 1rem 0.625rem 1.5rem;
position: relative;
overflow: hidden;
background-color: #fff;
border: 0.03125rem solid #E6E6E6;
border-radius: 1.3125rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.cta--pill::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: #D61E15;
border: 0.03125rem solid #D61E15;
border-radius: 1.3125rem;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: transform 0.35s ease-in-out;
-moz-transition: transform 0.35s ease-in-out;
transition: transform 0.35s ease-in-out;
}
.cta--pill .cta-text {
padding-right: 2.25rem;
position: relative;
z-index: 2;
}
.cta--pill .cta-arrow {
display: flex;
justify-content: center;
align-items: center;
width: 1.75rem;
height: 1.75rem;
position: absolute;
top: 0.4375rem;
right: 0.5rem;
z-index: 2;
background-color: #D61E15;
box-shadow: 0 2px 5px 0 rgba(176, 25, 17, 0.41);
border-radius: 100%;
border: 0.03125rem solid transparent;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
.cta--pill:hover {
border-color: #D61E15;
box-shadow: 0 4px 10px 0 rgba(176, 25, 17, 0.41);
color: #fff;
}
.cta--pill:hover::before {
transform: translateX(0);
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@700&display=swap" rel="stylesheet">
<a class="cta cta--pill cta--no-shadow" href="#" title="View all services">
<span class="cta-text">All Services</span>
<span class="cta-arrow">
<svg role="img" class="arrow arrow--right" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02 1.183l.658-.658a.708.708 0 0 1 1.004 0l5.761 5.758a.708.708 0 0 1 0 1.004l-5.76 5.761a.708.708 0 0 1-1.005 0l-.658-.658a.712.712 0 0 1 .012-1.016l3.57-3.402H1.087a.71.71 0 0 1-.711-.711v-.949a.71.71 0 0 1 .71-.711h8.518L6.032 2.199a.707.707 0 0 1-.012-1.016z" fill="#FFF"></path>
</svg>
</span>
</a>【问题讨论】：