Question

我是CSS3和HTML的新手，我试图让-moz-border-image显示但是它没有显示，而是显示border: 20px solid red;即使我得到了摆脱border代码，它仍然无法显示-moz-border-image，因为它需要显示边框宽度，所有代码都在.sampleDiv2。

我正在使用firefox浏览器。谢谢

＆＃13;

<!doctype html>
<html>

<head>
  <title>CSS3 borders</title>

  <style>
    body {
      margin-left: 40px;
    }
    .sampleDiv {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      border-width: 16px;
      border-style: solid;
      border-color: red;
      border-radius: 25px 50px 100px 200px;
    }
    .sampleDiv2 {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      -moz-border-image: url( http://s28.postimg.org/hs0wu7rvx/star_frame.png) 50 50 50 round;
      border: 20px solid red;
    }
  </style>
</head>

<body>

  <h1>CSS3 borders</h1>
  <div class="sampleDiv"></div>
  <br/>
  <div class="sampleDiv2"></div>

</body>

</html>

＆＃13;

＆＃13;
这是.sampleDiv2应该发生的事情，因为我为切片属性50px做了50px，我不知道要使用多少宽度，我做了{{1}对于外边界（我所说的不会与图片匹配，因为我猜它很大）和50px绕过边界。

Answer 1

我得到了它的工作。

 body {
      margin-left: 40px;
    }
    .sampleDiv {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      border-width: 16px;
      border-style: solid;
      border-color: red;
      border-radius: 25px 50px 100px 200px;
    }
    .sampleDiv2 {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      -moz-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Safari */
  -o-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Opera */
  border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat;
    }

小提琴：http://jsfiddle.net/kzoydpwL/

编辑：您可以在this link ...

了解border-image

您的代码遇到的主要问题是您甚至没有提供图片链接。 http://postimg.org/image/3ll5yzh0p/不是http://s28.postimg.org/hs0wu7rvx/star_frame.png的图像直接链接。

css3 -moz-border-image不起作用？

1 个答案: