装饰边框css

Question

我已经研究了一段时间但仍无法找到一种方法在css上建立这种边界，到目前为止，我只做了一面。

我指的是与css相同的边框而不是图片

Answer 1

这与css3一致。看看：https://developer.mozilla.org/es/docs/Web/CSS/border-image

首先：像往常一样定义边框的宽度（border: 30px solid...）; 然后使用border-image指定图像的特征：

- 您需要使用ulr（）设置图像。

- 然后以px（无单位）或百分比（％）设置如何切割图像以创建边框。请注意，要平铺边框，图像将在9个扇区中切片。此数字是距此切片边界的距离。例如，在300x300像素的情况下，如果你将其切成100，则生成9个100x100的正方形。

- 最后说它是否应重复，圆形或拉伸。

小贴士：这有点困难，所以我的建议是让你的图像在3x3网格中运行，这样角落就能适应两侧。

＆＃13;

＆＃13;

.box{
  width: 200px;
  height: 200px;
  background: #EEE;
  border: 30px solid transparent;
  border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

供应商前缀不再是非常必要的：http://caniuse.com/#search=border-image