边界半径随着溢出规则消失答案

【问题标题】：Border-radius disappears with overflow rule边界半径随着溢出规则消失
【发布时间】：2016-09-10 06:51:31
【问题描述】：

我在使用 Ionic Framework 头像ion-item 上的overflow:visible; 规则时遇到问题。我想用旁边的用户图像创建一个聊天气泡。我已成功使图像溢出其父级，但结果是我在ion-item 上设置的边框半径消失了。没有边框半径，边框将正确显示。

这就是我得到的。

以及我希望实现的目标。

这是我的 CSS

.item-content,.item, p  {
     overflow: visible;

}

.item-avatar {
    margin-left:15%;
    max-width: 50%;
    border-radius: 10px;
    margin-top:10px; 

}

 .item-avatar .item-content > img:first-child,   .item-avatar-left {
    left:-50px;
     overflow: hidden;

}

这是我的视图模板..

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img class = "avatar" ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
         <p>{{chat.id}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

【问题讨论】：

一个工作样本将有助于准确地显示问题。您可以为此使用 jsfiddle 或 sn-ps
如果子 div 有背景色，并且设置为具有边框半径的父级的全宽和全高，那么它将像这样剪切角
@jtmingus 这是解决方案，我通过在子元素上设置相同的边框半径进行了快速检查，瞧..post 作为答案，我会接受

标签： css layout ionic-framework

【解决方案1】：

如果子元素有背景色并且设置为父元素的全宽和全高，那么边角会被剪掉。

很可能，您的子元素不需要背景颜色，因此删除它可以解决您的问题。如果它确实需要背景颜色，则只需从父元素继承边框半径。

.item-avatar-child {
  border-radius: inherit;
}

【讨论】：