Question

我想实现以下问题中描述的效果，但使用CSS。我记得在某个地方看到现在可以用HTML5完成，但现在无法找到属性名称。

Stretching an UIImage while preserving the corners

Answer 1

你必须使用3张不同的图像。

首先，进入photoshop或Gimp等，将你所拥有的箭头图像分成3个部分。左侧带有曲线，右侧带有箭头部分。将它们保存为3个不同的图像。

一旦你有你的图像。创建一个HTML图像元素：

<img src="img-middle.jpg" />

在CSS中，将样式应用于前后伪元素，并添加两个不想拉伸的图像位。

img:before {
    contents: '';
    background: url('img-left.jpg');
    height: 50px;
    width: 20px;
    position: absolute;
    left: -20px;
}

img:after {
    content: '';
    background: url('img-right.jpg');
    height: 50px;
    width: 40px;
    position: absolute;
    right: -40px;
}

确保更改宽度，高度，左右值以匹配两个图像文件的宽度和高度。无论元素的拉伸范围多大，此CSS都允许将图像的这些位添加到左侧和右侧。它也很酷，因为它只有一个元素，所以CSS保持相当干净，除了空内容的要求：'';属性。

那么你可以动态地拉伸你的中间图像元素。让我们说你想要他伸展箭头，有一些jQuery动画元素的宽度，然后中间部分将拉伸，角落将保持完整，因为他们在技术上不是原始元素的一部分，他们只是附加。

ETA：对于Objective-C相关帖子中描述的方法，没有CSS属性可以将图像分开，除非它是在我从未听说过的一些模糊的webkit夜间版本中。你在这里的选择是打破另外两方。您还可以将图像的左右部分组合成一个精灵并使用背景位置：; CSS属性用于选择图像的位，这样您只需要有两个图像文件请求，因为您希望保持这些请求较低，以加快页面加载时间。

Answer 2

你可以创建一个元素，为左侧和右侧的帽子分配伪元素，并使用应用于width属性的CSS3过渡来实现这种效果。

我已经设置working demo on jsFiddle来说明它是如何完成的。此演示使用背景颜色，但也可以使用图像（沿X轴重复中心元素）。

查看HTML5 rocks playground，您会发现一些引人入胜的片段，展示了CSS3和HTML5的强大功能（自然而然），并且可以将其用作快速参考。

在保留HTML5中的角落的同时拉伸图像

2 个答案: