如下代码里的css里的图片显示为什么总是显示不全, 右上角总是缺一个角

Question

<view class="cate-section">
    <view class="cate-item" v-for="(item,index) in types" :key="index" @click="cateItemClick(item)">
        <image style="width: 60px; height: 60px;" src="../../../static/Snip20191130_1.png"></image>
        <view style="height: 20px;font-size: 14px;text-align: center;">{{item.name}}</view>
    </view>
</view>

.cate-section {
    display: flex;
    flex-direction: row;
}

.cate-item {
    flex: 1;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

这是示例src图片:

下面代码的显示效果图，右上角总是显示不全缺一个角

Answer 1

不是缺角，是整张图的边框变成圆形了，而且是在别的地方把边框改成圆形的，你给的css里连"border"都没有。如果还是想保留圆形边框，你应该把"new"做成单独的组件贴在图片的右上角，而不要一起放在图里。这种组件叫badge，可以搜索一下别人的实现方法。

Answer 2

这个角是被你自己“砍掉”的。因为你的这个 view 有一个 border-radius: 50%; 并且可能还有 overflow: hidden;，所以，在这个 view 内的元素超出区域后就被砍掉了。

可以考虑把 border-radius: 50%; 挪一个位置进来

<view> <!-- 最外层，无圆角 -->
  <image> <!-- badge -->
  <view>  <!--- 内容部分，有 border-radius -->