1

我想达到下面问题中描述的效果，但是使用CSS。我记得在某处看到现在可以使用 HTML5 完成此操作，但现在找不到属性名称。

在保留角的同时拉伸 UIImage

4

3 回答 3

2

您必须使用 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 属性，这样您就只有两个图像文件请求，因为您希望将这些请求保持在低位以加快页面加载时间。

于 2012-05-05T00:05:46.010 回答
1

您可以创建一个元素，为其分配左右侧盖的伪元素，并使用应用于 width 属性的 CSS3 过渡来实现此效果。

我在 jsFiddle 上设置了一个工作演示来说明它是如何完成的。此演示使用背景颜色，但也可以使用图像（沿 X 轴重复中心元素）。

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

于 2012-05-05T00:23:57.197 回答
0

你是说CSS3吗？

我想border-image这几乎就是你要找的东西。它使您可以拍摄单个图像并将其转换为元素的边框。

这有点难用，所以 Mozilla 制作了一个很棒的所见即所得编辑器： https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

于 2020-12-24T05:02:20.300 回答