具有变换比例 CSS 属性的卡片块在悬停时失去其边界半径

Posted 2023-03-05

【中文标题】具有变换比例 CSS 属性的卡片块在悬停时失去其边界半径

【英文标题】：Card block with a transform scale CSS property loses its border-radius when hovered

【发布时间】：2022-01-18 05:31:54

【问题描述】：

当悬停具有transform: scale(1.03) 的those product cards 时，border-radius 会消失。有没有办法在没有这种效果的情况下让卡片在悬停时缩放？

谢谢！

【参考方案1】：

您的border-radius 正在消失，因为具有半径的元素在具有固定大小的父元素内缩放，导致溢出缩放被遮挡。保持border-radius 一致的一种方法是将其应用于父元素，同时将悬停transform 应用于内容，这样半径就不会缩放。

.slide 
    background-color: black;
    border-radius: 20px;
    display: inline-block;
    color: white;
    height: 150px;
    margin: 5px;
    padding: 30px;
    width: 150px;

.slide div 
    transition: transform 0.5s;

.slide:hover div 
    transform: scale(1.1);

<div class="slide">
  <div class="contents">
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <p>Description</p>
  </div>
</div>
<div class="slide">
  <div class="contents">
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <p>Description</p>
  </div>
</div>

【讨论】：

感谢您的回复，这完全有道理，下次我会记住的。不幸的是，这一次并没有解决问题。当我将转换应用于父 div .slick-slide.slick-active > div:hover 时，它会一直“隐藏”边界半径。