注册登录

gweii

gweii

发布：2021-11-22 13:00
更新：2022-01-11 19:16
阅读：1363

微信小程序，<video>设置border-radius: 20rpx，实际显示左上角没有圆角

分类：uni-app

示例代码如下：

<template>  
    <view>  
        <video :src="promotion.media[0].url" class="header" />  
    </view>  
</template>  

<style scoped>  
.header {  
    width: calc(100vw - 96rpx);  
    height: 168rpx;  
    border-radius: 20rpx;  
    overflow: hidden;  
}  
</style>

显示结果见附件图片。

2021-11-22 13:00 负责人:无分享

2 个回复

DCloud_UNI_Anne

未复现此问题，排查下是否受其他元素影响

皓皓P

我有同样的问题，并无别的元素影响，使用image无此问题，可以使用接口返回的网络视频进行尝试。

2022-01-11 19:13

左上角的圆角可以多加2rpx或者少2rpx可以解决，只是样式不统一

皓皓P

例如设置border-radius: 22rpx 20rpx 20rpx 20rpx;或border-radius: 18rpx 20rpx 20rpx 20rpx;

2022-01-11 19:18

该问题目前已经被锁定, 无法添加新回复