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

Question

我overflow:visible;在Ionic Framework头像上使用规则存在问题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;
}