一个父元素的border-radius不生效的问题

问题：

遇到一个圆角的问题，设置了父元素的border-radius，但不生效。

正常情况

没有overflow

hover的正常情况

hover的不正常情况

解决过程：

偶然间，通过设置overflow: hidden;居然生效了（表要问我为啥，猜的，程序员就需要脑洞大开的试错）。继而，又发现在有hover效果的情况下，沙发(Safari)浏览器再次失效了。于是，继续试错，这次不幸运了，猜不着了。这次是在度娘的帮助下找到了线索，原来，safari、chrome浏览器早期存在这个问题（hover不hover都有），但是可以通过设置transform属性来解决，带着尝试的心理时试了一下，成功了。

解决方案：

在父元素上设置了border-radius，但不生效。可以在父元素上再设置：overflow: hidden;。
部分浏览器不兼容这种方式，如果safari、chrome早期的版本，可以在父元素上再增加一个transform属性(任何生效的值都可以)，例如：

.parent {
  transform: translate(0,0);
  /* 或 */
  transform: scale(0);
  /* 或 */
  transform: rotate(0deg);
}

设置了transform属性后，不管带不带hover效果都生效了。

附代码：

  
    

      
      {{ categoryName }}
    
    

      

        {{ data.title }}
      
      
        {{
          isAppointed ? '✓ 已报名' : '去报名'
        }}
      
    
  

.activity-news-card {
  display: inline-block;
  width: 100%;
  background: @primary-color7;
  overflow: hidden;
  // transform: translate(0, 0);
  & + .activity-news-card {
    margin-left: 16px;
  }

  &:hover {
    .activity-news-card {
      &__status {
        transform: translate3d(0, 0, 0);
      }

      &__cover > img {
        transform: scale3d(1.1, 1.1, 1);
      }
    }
  }

  &__cover {
    position: relative;
    height: 78px;
    margin: 0;
    overflow: hidden;

    & > img {
      width: 100%;
      height: 100%;
      transition: all 0.3s;
    }
  }
  &__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 38px;
    height: 21px;
    font-size: 12px;
    font-weight: 400;
    color: @primary-color;
    line-height: 21px;
    opacity: 0.6;
    background: @primary-color5;
    border-radius: 6px;
    text-align: center;
    .text-ellipsis();
  }

  &__meta {
    position: relative;
    padding: 10px;
    overflow: hidden;
  }

  &__title {
    min-height: 42px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: @text-color;
    line-height: 21px;
    .text-ellipsis(2);
  }

  &__status {
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    background: @linear-gradient-2;
    border-radius: 0px 0px 16px 16px;
    transform: translate3d(0, 100%, 0);
    transition: all 0.3s;

    &-text {
      width: 62px;
      height: 22px;
      background: @primary-color;
      border-radius: 11px;
      font-size: 12px;
      line-height: 22px;
      text-align: center;
      color: #fff;
    }
  }
}