css 中间镂空 |css3特效html5

首先，大家需要用到CSS的伪元素（::before和::after）以及一些常见的属性。比如说：content、position、display和border等。

.content {
	position: relative;
	display: inline-block;
	margin: 50px;
	font-size: 36px;
	line-height: 1.2;
}
.content::before {
	content: attr(data-attr); 
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: lightgrey;
	width: 100%;
	height: 100%;
}
.content::after {
	content: attr(data-attr); 
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 1;
	color: white;
	-webkit-text-stroke: 1px black;
}

上面的代码中，大家在.content元素上应用了position属性，然后创建了两个伪元素。其中，content属性用于生成伪元素的内容。而position、top和left属性则控制了伪元素的位置。大家将其中一个伪元素的z-index设置为-1，另一个设置为1，可以使文字被镂空。

使用方法非常简单，只需要将所需内容放到一个具有.content类名的元素内即可。在上述代码中，示例代码为在html中设置data-attr方法来定义镂空的文字。

到此为止，大家已经成功实现了CSS中间镂空。当然，这只是一个基础实现，通过对CSS属性的调整，大家还可以让内容达到更加丰富的效果。