CSS边框图像不起作用

Question

我目前正在尝试使用CSS的border-image将自定义边框应用于div。 我觉得我拥有所有正确的代码，但是我的图像没有显示为边框。 有人可以看看这个html / css代码，告诉我我在做什么错吗？

HTML：

<div id="box">
&nbsp;
</div>

CSS：

   body { text-Align: center; } /* CENTER ALIGN FOR IE */

#PC_Attack_Lightbox {

  /*** CENTER ALIGN BOX ***/
  text-Align: left;
  margin: 0 auto;

  /*** SET WIDTH & HEIGHT ***/
  width: 500px;
  height: 500px;

  background: #EBF5FF; /* SET BG */

  /*** APPLY BORDER-IMAGE ***/
    border:35px outset brown;
    -moz-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
    -webkit-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
    border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
}

Answer 1

因为您使用box div并且在#PC_Attack_Lightbox上写入CSS，所以请使用PC_Attack_Lightbox

<div id="PC_Attack_Lightbox">
&nbsp;
</div>​

Answer 2

<div id="PC_Attack_Lightbox">

// your code here

</div>

body { text-Align: center; } /* CENTER ALIGN FOR IE */

#PC_Attack_Lightbox {

  /*** CENTER ALIGN BOX ***/
  text-Align: left;
  margin: 0 auto;

  /*** SET WIDTH & HEIGHT ***/
  width: 500px;
  height: 500px;

  background: #EBF5FF; /* SET BG */

  /*** APPLY BORDER-IMAGE ***/
    border:35px outset brown;
    -moz-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
    -webkit-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
    border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
}