我在使用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>
答案 0 :(得分:4)
如果子元素具有背景颜色并且设置为父元素的整个宽度和高度,则角落将被切除。
最有可能的是,您的子元素不需要背景颜色,因此删除它将解决您的问题。如果它确实需要背景颜色,那么只需从父元素继承边界半径。
.item-avatar-child {
border-radius: inherit;
}