【总结】CSS隐藏元素

最新推荐文章于 2025-02-10 13:13:09 发布

原创最新推荐文章于 2025-02-10 13:13:09 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用CSS的opacity、display、visibility和clip-path属性来隐藏网页元素，包括透明度、可见性设置和形状剪裁方法，帮助开发者掌握高级布局技巧。

隐藏元素的方法

<style type="text/css">
	.box{
		width: 400px;
		height: 400px;
		background-color:red;
	}
	.one{
		width: 100px;
		height: 100px;
		background-color: skyblue;
	}
	.two{
		width: 200px;
		height: 200px;
		background-color: yellowgreen;
	}
</style>

<div class="box">
		<div class="one">123</div>
		<div class="two">456</div>
</div>

在这里插入图片描述

opacity

opacity : 0
设置透明度的属性视觉上消失依旧占据位置
在这里插入图片描述

display

display : none

在这里插入图片描述

visibility

visibility : hidden
元素将会隐藏，会占据着自己的位置
在这里插入图片描述

clip-path

clip-path : polygon(0 0,0 0,0 0,0 0);
使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏
补充:

// 裁剪为矩形
clip-path : inset(top,right,bottom,left) ;

// 裁剪为圆形(圆的半径,圆心位置)
clip-path : circle(x at xxx xxx);

// 裁剪为椭圆形(x轴半径,y轴半径,圆心位置)	
clip-path : ellipse(x y at xxx xxx);

// 裁剪为多边形 内部参数表示多边形的连接点的(x,y)坐标
clip-path : polygon();