Css 如何创建一个图像精灵，作为一个单一的图像水平和垂直拉伸？_Css_Sprite_Css Sprites

Css 如何创建一个图像精灵，作为一个单一的图像水平和垂直拉伸？

css

Css 如何创建一个图像精灵，作为一个单一的图像水平和垂直拉伸？,css,sprite,css-sprites,Css,Sprite,Css Sprites,我正在尝试为一个盒子制作一个图像精灵，它可以垂直和水平拉伸，同时也可以在状态上悬停。我通常创建一个只能垂直或水平拉伸的精灵。在这种情况下，我会让盒子的部分无限延伸，接触图像的顶部和底部，以垂直循环，或接触左侧和右侧，以水平延伸，但我坚持为两者制作一个精灵下面是我正在处理的内容，其中将包含一个链接列表（），这些链接将使用悬停状态的背景色左侧：常规状态右侧：悬停状态我不知道我是否可以将CSS与我现在所拥有的一起使用，来完成我正在尝试完成的任务，或者我是否必须将图像分解成一个文件的小部分。下面

我正在尝试为一个盒子制作一个图像精灵，它可以垂直和水平拉伸，同时也可以在状态上悬停。我通常创建一个只能垂直或水平拉伸的精灵。在这种情况下，我会让盒子的部分无限延伸，接触图像的顶部和底部，以垂直循环，或接触左侧和右侧，以水平延伸，但我坚持为两者制作一个精灵

下面是我正在处理的内容，其中将包含一个链接列表（

左侧：

右侧：

问题：

我可以通过使用大多数标准浏览器支持的CSS代码来实现第一幅图像的目标吗？这意味着不需要绝对最新版本的Firefox、Chrome和Safari？我希望这是高度兼容的
如果问题1为否，那么如何为本例创建精灵布局
如果圆角的实现不明显，您可以提供示例CSS（伪代码也可以）吗

在IE8及以下版本中，阴影和圆形边框缺失
在IE7及以下版本中，箭头和悬停状态也会丢失，因此只有一个框：(

.box {
    background-color: #ccc;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    position: relative;
}
.box:hover {
    background: white;
}
.box:hover:after {    
    border-bottom: 20px solid white;
}
.box:before {
    content: ' ';
    display: block;
    position: absolute;
    top: -6px;
    right: 26px;
    width: 8px;
    height: 6px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.box:after {
    content: ' ';
    display: block;
    position: absolute;
    top: -10px;
    right: 10px;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}