溢出隐藏和边界半径伪影

Posted 2023-03-04

【中文标题】溢出隐藏和边界半径伪影

【英文标题】：overflow hidden and border radius artifacts

【发布时间】：2021-12-29 04:08:09

【问题描述】：

我有一个圆形按钮，它在悬停时添加了滑过效果：

a.swipe 
  /** Things I tried **/
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: radial-gradient(white, black);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 12px;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border-radius: 9999px;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: auto;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  line-height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 219px;


a.swipe.primary:after 
  background-color: rgb(193, 36, 36);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.3s;
  transition-property: all;
  transform: matrix(1, 0, -0.21255656167002213, 1, 0, 0);
  width: 0px;


a.swipe.primary:hover:after 
  width: 100%;

<div style="background-color: rgb(193, 36, 36); padding: 12px;">
  <a href="#" class="swipe primary">
    <span class="z-10">
        Primary Button Black
      </span>
  </a>
</div>

按钮上有这些白色伪影。

已经有很多解决这个问题的建议，我尝试了很多，包括outline, box-shadow(inner), mask-image, blackface-visibility ...，但没有一个能正常工作。 有没有人可以解决这个问题？ 提前致谢！

【参考方案1】：

用伪元素创建一个小溢出并保留掩码解决方案。我正在使用inset 相当于top/right/bottom/left (Is there a css function that allows me to set the values of top, right, bottom, and left for position all in one line?)

a.swipe 
  -webkit-mask: linear-gradient(#000 0 0);
  padding: 12px;
  background-color: rgb(255, 255, 255);
  border-radius: 9999px;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: auto;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  line-height: 24px;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 219px;


a.swipe.primary:after 
  background-color: rgb(193, 36, 36);
  content: "";
  position: absolute;
  inset:-1px 100% -1px -1px;
  transition: 0.3s;
  transform: matrix(1, 0, -0.21255656167002213, 1, 0, 0);


a.swipe.primary:hover:after 
  inset:-1px;

<div style="background-color: rgb(193, 36, 36); padding: 12px;">
  <a href="#" class="swipe primary">
    <span class="z-10">
        Primary Button Black
      </span>
  </a>
</div>

【参考方案2】：

a.swipe 
  /** Things I tried **/
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: radial-gradient(white, black);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 12px;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border-radius: 9999px;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: auto;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  line-height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 219px;
  transition-duration: 0.3s;
  transition-property: all;


a.swipe.primary:after 
  background-color: rgb(193, 36, 36);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.3s;
  transition-property: all;
  transform: matrix(1, 0, -0.21255656167002213, 1, 0, 0);
  width: 0px;
  z-index:  -1;

a.swipe.primary:hover
  background-color: transparent;

a.swipe.primary:hover:after 
  width: 100%;

<div style="background-color: rgb(193, 36, 36); padding: 12px;">
  <a href="#" class="swipe primary">
    <span class="z-10">
        Primary Button Black
      </span>
  </a>
</div>