【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>
相关推荐
川石课堂软件测试几秒前
性能测试|JMeter接口与性能测试项目
javascript·数据库·python·jmeter·单元测试
编码小袁1 小时前
探索JavaScript的强大功能:从基础到高级应用
开发语言·javascript·ecmascript
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段方式二
前端·javascript·arcgis
a48224251 小时前
前端交互展示:裂缝与凹痕分割
前端·交互
此星光明1 小时前
GEE 数据集——美国gNATSGO(网格化国家土壤调查地理数据库)完整覆盖了美国所有地区和岛屿领土的最佳可用土壤信息
javascript·数据库·数据集·美国·数据·gee·土壤
每天进步一大步2 小时前
基于表格滚动截屏(表格全部展开,没有滚动条)
开发语言·前端·javascript
Dreams°1232 小时前
【ECMAScript标准规范】
前端·vscode·前端框架·ecmascript
咔咔库奇2 小时前
react动态路由
前端·react.js·前端框架
执键行天涯2 小时前
【Vue】Vue3.0(二十)Vue 3.0 中mitt的使用示例
前端·javascript·vue.js
猛男敲代码3 小时前
SSE与WebSocket与MQTT
前端·javascript·websocket