当前位置： 首页 > article >正文

【css】overflow: hidden效果

article 2024/12/25 13:19:25

1. 不添加overflow: hidden

1.1 效果

  • 上面无圆角
    在这里插入图片描述

1.2 代码

<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 代码

<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>

http://www.kler.cn/a/383549.html

相关文章：

  • 四种自动化测试模型实例及优缺点详解
  • jsp中的四个域对象(Spring MVC)
  • HTML基础学习（1）
  • Java爬虫获取1688 item_search_img接口详细解析
  • Java 中 Socket 技术全面解析
  • Android 代码模式的理解
  • 【设计模式】结构型模式（三）：桥接模式、外观模式
  • 如何建购物网站提升用户体验
  • 泷羽sec学习打卡-shodan扫描6
  • 完成程序《大奖赛评分B》
  • Python入门资料！笨办法学Python！编程小白的第一本Python入门书！
  • 解决微信小程序电脑能正常使用，手机端无法正常访问的问题
  • 100种算法【Python版】第56篇——Delaunay三角剖分之增量法
  • HTTP返回码和其含义
  • Flutter鸿蒙next 中使用 MobX 进行状态管理
  • Pinia-状态管理
  • Docker学习—Docker的安装与使用
  • 串联电抗器电感量误差较大的原因
  • chrome浏览器network控制台使用和功能介绍
  • C#/.NET/.NET Core优秀项目和框架2024年10月简报
  • 【简信CRM-注册安全分析报告】
  • 从0开始搭建一个生产级SpringBoot2.0.X项目（十一）SpringBoot 定时任务@Scheduled
  • T507 buildroot linux4.9之RLT8211F 1000M以太网开发调试
  • 【Android】Gradle 7.0+ 渠道打包配置
  • 插值字符串以$开头，并在大括号{}中可以直接插入变量和表达式
  • dockerfile/docker-compose构建镜像上下文目录编写要点