有没有办法使用不同的图像CSS3边框图像的每一边？ [英] Is there a way to use a different image for each side of a CSS3 border-image?

问题描述

在Firefox和Safari上，我可以使用图片作为以下CSS的边框：

  -moz-border- image：url（shadow_left.png）0 7 0 7 round round; 
 -webkit-border-image：url（shadow_left.png）0 7 0 7 round round; 
  

但是，我不知道如何使用左右不同的图像。

解决方案

上一个草稿说（2009年11月25日）这些属性消失了。您似乎无法为每个边框端使用不同的图片。

作为个人注意，我不会使用不同的图片，以避免同样的原因闪烁可以在单个图像文件中打包按钮状态（未压缩，按下，悬停），然后使用css在源图像中进行偏移。

编辑： org / TR / 2002 / WD-css3-border-20021107 /rel =nofollow noreferrer> WD 2002-11-07 ，但在 WD 2005-02-16 。

EDIT2：对 jquery.borderimage.js 插件感兴趣。

On Firefox and Safari, I can use an image for the border with the following CSS:

-moz-border-image: url(shadow_left.png) 0 7 0 7 round round;
-webkit-border-image: url(shadow_left.png) 0 7 0 7 round round;

However, I can't figure out a way to use a different image for left and right. Is there any way of doing so which is supported by modern browsers?

解决方案

Previous drafts said it's possible, by using:

border-top-image
border-right-image
border-bottom-image
border-left-image
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

However, the current candidate recommendation for CSS Backgrounds and Borders(25 November 2009) these properties disappeared. It looks like you cannot use different images for each border side anymore.

As a personal note, I wouldn't have used different images anyway to avoid flickering for the same reason one would pack button states (unpressed, pressed, hover) in a single image file and then use css to offset in the source image.

EDIT: border-top-image, border-left-image, etc were present in WD 2002-11-07 but disappeared in WD 2005-02-16.

EDIT2: You might be interested in the jquery.borderimage.js plugin.

这篇关于有没有办法使用不同的图像CSS3边框图像的每一边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！