CSS中内容的剪切属性clip

最新推荐文章于 2024-07-05 09:52:23 发布

波哥的技术积累

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量5.0k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/woshisap/article/details/8488676

版权

css 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1. 在CSS中，可以使用剪切属性对元素内容的可视化区域进行控制，剪切区域所使用的属性时clip属性，

用来裁剪元素的可视化区域，内容的剪切属性可以使用2种属性值，一种为auto值，另一种为区域值，语法结构：

clip: auto | rect(number, number, number, number)

其中，rect中定义的4个属性值是以元素左上角为中心，按照上、右、下、左的顺序定义的剪切区域的4条边线，

在4条边线规定的区域中将显示元素内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> CSS属性 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    .clip {
	 position: absolute;
	 top: 20px;
	 left: 20px;
	 clip: rect(10px 140px 40px 80px) !important;
	 width: 200px;
	 height: 200px;
	 background: #666666;
	}
	.main {
      width: 300px;
	  height: 300px;
	  background: #999999;
	}
  </style>
 </head>

 <body>
   <div class="main">
     <div class="clip"></div>
   </div>
 </body>
</html>

如上图所示，在子元素中，只有被定义剪切属性的区域部分才能够显示，其他部分以透明的方式显示。

2. 剪切属性与内容

在使用剪切属性的时候，元素内容的显示方式并不发生改变，元素中的内容在剪切区域之外的部分将会消失，但是元素占有的空间

并不会发生改变。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> CSS属性 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    .clip {
	  position: absolute;
	  top: 20px;
	  left: 20px;
	  clip: rect(5px 140px 80px 20px);
	  width: 200px;
	  height: 200px;
	  background: #666666;
	}
	.main {
	  width: 200px;
	  height: 200px;
	  background: #999999;
	}
  </style>
 </head>

 <body>
   <div class="main">
     <div class="clip">这里是剪切元素中的内容，注意内容被裁减的情况。</div>
   </div>
 </body>
</html>

在子元素中存在部分文本内容，当使用剪切属性后，部分文本内容和背景将会消失，但是原有文本内容的所在位置不发生变化。