标签: border-image

我想使用CSS属性“border-image”：https://developer.mozilla.org/de/docs/Web/CSS/border-image

但由于某种原因它只填充了元素的四个角：

我的代码：

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid transparent;
  border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
}

<div class="wrap">
  <div class="item"></div>
</div>

我有什么错吗？

我希望这个小图像能够在垂直和水平方向上重复。

这样灰色框就被图像图案包围起来了。

非常感谢任何帮助。

这是我会得到的结果：

所以默认按钮有透明背景的渐变边框（因为我想通过它看到父级的背景）。当用户将鼠标悬停在按钮上时，我想用相同的渐变填充它有边框。

所以首先我尝试使用 border-image 属性和我的边框的 .svg 图像：

button {
  background: transparent;
  background-repeat: no-repeat;
  border: 3px;
  border-style: solid;
  border-color: transparent;
  border-image-source: url(assets/images/icons/border.svg);
  border-image-repeat: stretch stretch;
  border-image-slice: 49;
  border-image-width: 100px;
  border-image-outset: 6px;
  padding: 16px 28px;
  border-radius: 100px;
}

所以我或多或少得到了我正在等待的结果：

现在，如何管理悬停动画并在不改变大小的情况下填充背景！？

也许边框图像不是最好的方法？

感谢您的帮助，干杯！

因为background-image你可以添加任意数量radial-gradient和/或linear-gradient你想要的数量.但border-image似乎你只能添加一个.如果发现它很奇怪,因为如何显示渐变的原则应该是相同的边框和背景,对吧？

有没有办法添加多个渐变border-image？我只对纯CSS解决方案感兴趣.

这不起作用,因为它包含多个渐变:

div {
  height: 30px;
  width: 40px; 
  border: 50px solid black;
  border-image: 
  radial-gradient(circle at 20px 30px, green 20px, rgba(0,0,255, .5) 20px),
  radial-gradient(30deg, blue 22px, red 22px);

}

https://jsfiddle.net/thadeuszlay/p6r2p78g/

这有效,但只包含一个渐变:

div {
  height: 30px;
  width: 40px;
  border: 50px solid black;
  border-image: radial-gradient(circle at 20px 30px, green 20px, rgba(0, 0, 255, .5) 20px);
}

https://jsfiddle.net/thadeuszlay/p6r2p78g/1/

我遇到了Safari 10和CSS边框图像渐变的问题.它适用于所有其他浏览器,甚至可以在Safari 9中使用.它甚至可以在Safari 10中显示在线模拟器中.请看下面的图片:

(我猜这是IE 11,而不是IE 10.感谢您的纠正!)

我以为它只是我的CSS所以我真的很简单,并且做了一个小提琴.你可以在https://jsfiddle.net/tgbuxkee/看到它

它也在下面生成.

div {
  width: 200px;
  height: 200px;
  border: 6px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
    border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%); 
    -webkit-border-image-slice: 2;
    border-image-slice: 2;
  
}

<div>

</div>

有没有人知道为什么会这样？我知道在Safari中有一些图像边框的错误,但我不认为这是这种情况(也许是这样).

指导很有帮助.

谢谢.

我有这个:

.striped-border {
    border: 8px solid transparent;
    border-image: url(../img/stripes.png) 9 round;
}

我想要的是:

是否可以仅对边框图像应用不透明度而不是内容？

我正在使用border-image属性来创建带有 9 切片的样式组件。此外，我还使用 csstransform: scale(x)属性根据屏幕尺寸缩小/放大我的元素。我遇到的问题是，当比例设置为整数（如 1、2、3...）时，我的 9 切片组件看起来不错，但如果它是浮点数，则边框显示 9 切片线/间隙，而我是很难修复它。

我尝试过为border-image-slice以及设定不同的值scale。最初认为当小数点后的数字是奇数时会导致此问题，但无论如何这是一个奇怪的想法。

<div class="Primary-Back-Button" style="transform: scale(1.2);">
  <button class="Primary-Button" id="">
     <div class="Primary-Button-Content">Button</div>
  </button>
</div>

预期的结果是在使用比例时在边界上不显示任何线条/间隙，否则我也愿意改变我们缩放事物的方式。我基本上想在桌面应用程序上保持相同的布局，无论屏幕尺寸是什么。这是我正在开发的一款桌面游戏，它在 UI 端使用 JS。

当比例为整数时的预期结果，在本例中设置为 6：

注意当我将比例设置为 6.25 时的线条

在下面的代码中，我希望两个 div 都是圆形的。但第一个border-image应用的是方形的。我怎样才能解决这个问题并使其圆润呢？

div {
  float: left;
  width: 130px;
  height: 130px;
  margin: auto;
  
  border: 30px solid transparent;
  border-radius: 50%;
  border-image: linear-gradient(45deg, red, blue) 30;
}

div + div {
  margin-left: 1em;
  border-image: none;
  border-color: green;
}

<div></div>
<div></div>

我想像w3school示例中那样设置边框图像的样式:http://www.w3schools.com/css/tryit.asp？filename =trycss3_border-image .

但是当我在我的桌面上尝试它时,https://jsfiddle.net/tangjeen/6yLtmb98/边框图像的结果是不一样的.如果你能帮助我,我将不胜感激.谢谢.

<div class="row" id="round">
   <p>sdfsfsdf</p>
</div>

#round{
   -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
   -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
   border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; 
   background-color: lightyellow;
}