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

Question

我在使用 overflow:visible; 时遇到问题Ionic Framework avatar 规则 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;

}

这是我的 View 模板..

<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

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

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

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