悬停时的 CSS 变换和框阴影

Posted 2023-03-28

【中文标题】悬停时的 CSS 变换和框阴影

【英文标题】：CSS transform and box-shadow on hover

【发布时间】：2021-07-13 18:39:02

【问题描述】：

我有使用材质 UI 的卡片组件。卡片在悬停时变形，卡片上也应该出现阴影。但是当我把 box-shadow 阴影出现在变形前的盒子上时，变形后的卡片和阴影之间有空白。我该如何解决这个问题？

const CardStyle = styled(Card)`
  background: red;
  transition: transform 50ms;
  &:hover 
    transform: scale(1.02) perspective(0px);
    box-shadow: $( theme ) => theme.shadows[4];
  
`;

其他方式相同的输出：

:hover 
  transform: scale(1.02) perspective(0px);
  box-shadow: 4px 4px 4px rgba(60, 60, 93, 0.33)

【问题讨论】：

什么是theme.shadows[4]？是否有一些 x、y 偏移量？

是的，这是阴影尺寸的偏移量。

【参考方案1】：

如果我正确理解您的意图，请为您的 box-shadow 添加一个过渡。

div 
  height: 5rem;
  width: 5rem;
  margin: 3rem auto;
  border: green 5px dashed;
  background: red;
  transition: transform .5s, box-shadow 1s;


div:hover 
  transform: scale(1.02) perspective(0px);
  box-shadow: 0 10px 10px rgba(255,0,0,.7);

<div></div>