1

可能在 div 边缘的抗锯齿方面遇到了麻烦；在圆角附近可以看到一条细白线：

边界半径问题1

任何想法，如何解决？

html {
  background-color: #4A5960;
}
.card {
    min-height: calc(100vh - 120px);
    max-width: 350px;
    margin: calc(env(safe-area-inset-top) + 58px) 20px;
    position: relative;
    overflow: hidden;
    background-color: white;
    cursor: pointer;
    border-radius: 14px;
    background-size: cover;
    background-position-x: center;
    padding-top: max(env(safe-area-inset-top), 7px);
    margin-right: 12px;
  
    flex-flow: column nowrap;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-end;
    align-items: center;
}
.card-inner-wrapper {
  width: 100%;
    min-height: 150px;
    border-radius: 14px;
    padding-top: 10%;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 41.15%, rgba(34, 34, 34, 0) 100%);
    opacity: 0.9;
  position: relative;
  z-index: 5;
}
  <div class="card">
    <div class="card-inner-wrapper">
    </div>
  </div>

这里的 Codepen 示例：https ://codepen.io/nikita-schetko/pen/eYdzQWx

4

0 回答 0