【css】overflow: hidden效果

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>
相关推荐
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20096 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼6 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder6 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔7 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀7 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP7 小时前
Ajax 详解
java·前端·ajax·javaweb