CSS3 background-origin property does work in firefox?

问题

I want use CSS3 property to make a complicated background image which with corner shadow and so on.Including background image,left border image,right border image.So,for the <div class="outer"></div>I write the CSS below:

    .outer
    {
        background:url("title_main.png");
        background-repeat:repeat-x;

        background-clip: content;
        background-origin:content;
        -moz-background-clip: content;
        -moz-background-origin: content;
        -webkit-background-clip: content;
        -webkit-background-origin：content;


        -webkit-border-image:url("title_border.png") 0 15 0 15 stretch;
        -moz-border-image: url("title_border.png") 0 15 0 15 stretch;
        border-image:url("fancy_title.png") 0 15 0 15 stretch;
        border-width:0 15px ;

        width:80px;
        height:32px;
    }

In chrome browser it work well like:

But the firefox doesn't like this:

Why would this happened?How can I fix this?Make the firefox effect like the chrome?

回答1:

The values of the background-origin property are content-box, padding-box, and border-box, according to the spec. So what you want is:

.outer {
    -webkit-background-origin: content;
    -moz-background-origin: content; /* Firefox 3.6 and below */
    background-origin: content-box; /* Firefox 4 and above */
    /* etc. */
}

来源：https://stackoverflow.com/questions/4578425/css3-background-origin-property-does-work-in-firefox