1. 不添加overflow: hidden
1.1 效果
- 上面无圆角
1.2 代码
js
<template>
<view class="parent">
<view class="child1">
child1
</view>
<view class="child2">
child2
</view>
</view>
</template>
<style lang="scss">
.parent{
background-color: red;
// overflow: hidden; //不添加
border-radius: 15rpx;
.child1{
width: 100%;
height: 60rpx;
background-color: green;
}
.child2{
width: 100%;
height: 60rpx;
}
}
</style>
2. 添加overflow: hidden
2.1 效果
2.2 代码
js
<template>
<view class="parent">
<view class="child1">
child1
</view>
<view class="child2">
child2
</view>
</view>
</template>
<style lang="scss">
.parent{
background-color: red;
overflow: hidden; //添加
border-radius: 15rpx;
.child1{
width: 100%;
height: 60rpx;
background-color: green;
}
.child2{
width: 100%;
height: 60rpx;
}
}
</style>