CSS3 多背景过时的推拉门

使用支持 CSS3 规范的浏览器（在撰写本文时仅支持 Safari），不再需要滑动门技术来创建利用背景图像的水平扩展元素。将多个背景图像分配给单个元素的能力可以快速解决问题。分配位于左侧的图像、重复的中间图像和位于右侧的图像，如下所示：

li.expanding {
	background: url('left.jpg') top left no-repeat,
			url('right.jpg') top right no-repeat,
			url('middle.jpg') top center repeat-x;	
	height: 40px;
	padding-top: 12px;
	padding-left: 12px;
	padding-right: 20px;
	float: left;
}

图像按照您声明的顺序排列，因此最顶部的图像将是您声明的第一个图像。换句话说，最后声明重复的图像。然后你可以使用一个简单的列表标记，如下所示：

<span style="background-color:#1b1b1b"><span style="color:#ffffff"><code class="language-html language-markup"><ul>
	<li class="expanding">This</li>
	<li class="expanding">Little Piggy</li>
	<li class="expanding">Went To The Market</li>
</ul></code></span></span>

你会得到这个：

很圆滑。