给CSS样式的div a“border-left-image” [英] Give a CSS styled div a "border-left-image"

问题描述

只是想让网站上的主要内容div在div的左侧和右侧有一个边框。而不是为每个边界单独的div，我想使用CSS3中的 border-left-image 功能来实现。我的代码如下：

Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:

#content {
    background-color: #7FC3F4;
    height: 100%;
    width: 900px;
    border-left-width: 30px;
    border-left-image: url(../images/border_left_gradient.png);
    border-right-width: 30px;
    border-right-image: url(../images/border_right_gradient.png);
    margin-right: 10%;
    margin-left: 10%;
}

$ b $ p

在我进行的所有Google搜索中，并解释为什么此代码无效。一些结果返回的数字值放在url之后，不管我尝试什么数字组合，没有骰子。

Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.

想法？

推荐答案

border-image 是

border-image is now supported in all the major browsers (2014-05-22)

演示 与单个 border-left-image

演示

演示现在至少需要Chrome 15，Safari 6，Firefox 15，IE 11或Opera 15。

The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.

实际上不可能不能使用单独的图片文件，但您可以在左侧和右侧切片单个图片。请参阅 border-image 第页，其中显示了一些很好的示例或 CSS技巧

It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.

注意：如果您需要更早的浏览器支持，请询问我之前的版本答案是与Chrome 12，Safari 5.0.3，Firefox 4和Opera 10的工作，但我现在已更新，新的浏览器支持前缀免费CSS3。

Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.

编辑： Firefox现在需要额外的属性设置 - border-style：solid （请参阅 CSS - 新的Firefox版本不再显示Border-Image ）

Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)

这篇关于给CSS样式的div a“border-left-image”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！