边界半径随溢出规则消失

Question

我在使用Ionic Framework头像overflow:visible;上的ion-item规则时遇到问题。我想创建一个聊天气泡，旁边有用户图片。我成功地使图像溢出其父级，但结果是我在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>

Answer 1

如果子元素具有背景颜色并且设置为父元素的整个宽度和高度，则角落将被切除。

最有可能的是，您的子元素不需要背景颜色，因此删除它将解决您的问题。如果它确实需要背景颜色，那么只需从父元素继承边界半径。

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