オーバーフロールールでボーダー半径が消える

Question

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> 

Answer 1

です親要素の角が切り取られます。

ほとんどの場合、あなたの子要素は背景色を必要としないので、それを削除すると問題が解決します。バックグラウンドカラーが必要な場合は、親要素からボーダー半径を継承します。

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