CSS中間鏤空是一種讓文字或者其他內容具有空心效果的技術。它可以讓內容看起來更加獨特，也能夠用在很多裝飾性的設計上。下面我們就來學習一下如何實現CSS中間鏤空。

首先，我們需要用到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屬性的調整，我們還可以讓內容達到更加豐富的效果。