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;
}

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

	
This
	
Little Piggy
	
Went To The Market

你会得到这个：

很圆滑。