Border-Radius verschwindet mit Überlaufregel

Ich habe ein Problem mit der Verwendung der overflow:visible; Regel auf dem Ionic Framework Avatar ion-item. Ich möchte eine Chatblase mit dem Benutzerbild daneben erstellen. Es ist mir gelungen, das Bild von seinem Elternteil überlaufen zu lassen, aber das Ergebnis ist der Grenzradius, den ich auf ion-item eingestellt habe, verschwindet. Ohne den Randradius erscheint der Rand richtig.Border-Radius verschwindet mit Überlaufregel

Hier ist, was ich bekomme.

Und was ich hoffe zu erreichen.

Hier ist meine 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; 

}

Hier ist meine Ansicht Vorlage ..

<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>

Quelle

2016-09-09 yaboiduke

Ein funktionierendes Beispiel wird sehr hilfreich sein, um genau das Problem zu zeigen. Sie können jsfiddle für diese oder Snippets verwenden – Dekel

Wenn ein Kind div eine Hintergrundfarbe hat und auf die volle Breite und Höhe eines Elternteils mit einem Rahmenradius eingestellt ist, dann wird es die Ecken wie – jtmingus

@jtmingus schneiden, die die Lösung war Ich habe einen kurzen Check gemacht, indem ich den gleichen Umrandungsradius auf die Child-Elemente und voila.post als Antwort gesetzt habe und akzeptiere – yaboiduke

Wenn das Kind Element eine Hintergrundfarbe und ist auf die volle Breite und Höhe eingestellt des Elternelements werden die Ecken abgeschnitten.

Höchstwahrscheinlich benötigt Ihr untergeordnetes Element keine Hintergrundfarbe. Wenn Sie es also entfernen, wird das Problem gelöst. Für den Fall, dass es eine Hintergrundfarbe benötigt, erben Sie einfach den Grenzradius vom übergeordneten Element.

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

Quelle

2016-09-09 22:51:31 jtmingus

Border-Radius verschwindet mit Überlaufregel

Antwort

Verwandte Themen