uni-app nvue页面原生组件无法设置圆角 希望有解决方案 或者可以设置圆角 如video组件和live-push组件都无法设置圆角
uni-app nvue页面原生组件无法设置圆角 希望有解决方案 或者可以设置圆角 如video组件和live-push组件都无法设置圆角
操作步骤：
- nvue页面直播推流组件无法设置圆角,video标签好像也不可以,希望官方尽快做出回应…
预期结果：
- 希望,原生组件也可以设置圆角,可以有更好的定制性
实际结果：
- …
bug描述：
- uni-app 使用直播推流组件无法加圆角样式,加样式之后没有一点作用,希望尽快解决,网上没有解决方案
| 信息项 | 内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC开发环境版本 | 20H2 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.1.19 |
| 手机系统 | Android |
| 手机系统版本 | Android 10 |
| 手机厂商 | 小米 |
| 手机机型 | 小米cc9e |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于uni-app nvue页面原生组件无法设置圆角 希望有解决方案 或者可以设置圆角 如video组件和live-push组件都无法设置圆角的实战教程也可以访问 https://www.itying.com/category-93-b0.html
video用圆角view套住,overflow: hidden.
更多关于uni-app nvue页面原生组件无法设置圆角 希望有解决方案 或者可以设置圆角 如video组件和live-push组件都无法设置圆角的实战教程也可以访问 https://www.itying.com/category-93-b0.html
iOS直接在原生组件上设置样式，但是有个坑，要么全部圆角，要么都不圆角，不能只设置一个两个或三个角为圆角
class {
border-radius: 12px;
overflow: hidden;
}
安卓上可以用阴影做个内圆角盖住4个角，但是iOS阴影显示规则与安卓不同，所以这种做法不支持iOS
<view class="address-map-wrap">
<map class="address-map"></map>
<view class="address-map-cover address-map-cover-top-left" ></view>
<view class="address-map-cover address-map-cover-top-right"></view>
<view class="address-map-cover address-map-cover-bottom-left"></view>
<view class="address-map-cover address-map-cover-bottom-right"></view>
</view>
样式
.address-map-wrap {
position: relative;
}
.address-map {
border-radius: 12px;
overflow: hidden;
}
.address-map-cover {
position: absolute;
width: 24px;
height: 24px;
border-radius: 12px;
}
.address-map-cover-top-left {
top: 0px;
left: 0px;
box-shadow: -12px -12px 0 0;
}
.address-map-cover-top-right {
top: 0px;
right: 0px;
box-shadow: 12px -12px 0 0;
}
.address-map-cover-bottom-left {
bottom: 0px;
left: 0px;
box-shadow: -12px 12px 0 0;
}
.address-map-cover-bottom-right {
bottom: 0px;
right: 0px;
box-shadow: 12px 12px 0 0;
}
页面模板代码
<view class="address-map-wrap">
<map class="address-map"></map>
<view class="address-map-cover address-map-cover-top-left"></view>
<view class="address-map-cover address-map-cover-top-right"></view>
<view class="address-map-cover address-map-cover-bottom-left"></view>
<view class="address-map-cover address-map-cover-bottom-right"></view>
</view>
还要将address-map-cover背景颜色设置与父级容器背景颜色一致
