Question

我试图获得如下图所示的边框：

但是我想用一张车的图片而不是点，背景被切掉箱子周围有一小排汽车。
我怎么能这样做？

这是我的尝试：

＆＃13;

.box-head {
  padding: 10px;
  margin: 0px auto;
  width: 50%;
  border: 5px;
  border-radius: 10px;
  text-align: center;
  background: linear-gradient(to right, #00e6ff, #6418ff);
  font-family: cursive;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Skyline's Pointless Website</title>
  <link rel="border" href"border.png">
</head>

<body>
  <div class="box-head">
    <h1>Welcome fello plebs to this completely pointless website.</h1>
    <p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
  </div>
</body>

</html>

＆＃13;

这里是汽车图片：

Answer 1

以下是使用border-image的示例：

使用border-image CSS属性可以绘制图像来代替元素的边框样式。

.box-head {
  padding: 42px;
  width: 60%;
  text-align: center;
  font-family: cursive;
  border-image-source: url("//mdn.mozillademos.org/files/6017/border-image-6.svg");
  border-image-slice: 42 fill;
  border-image-width: 42px;
  border-image-repeat: round;
}

h1 {
  font-size: 16px;
}

p {
  font-size: 12px;
}

<div class="box-head">
  <h1>Welcome fello plebs to this completely pointless website.</h1>
  <p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>

使用在线生成器可能有助于演示它的工作原理：
MDN
border-image.com

另见：
css-tricks.com
bitsofco.de
thenewcode.com

修改

你解释说你需要一排排汽车。

要使用border-image执行此操作，请使用3x3网格平铺汽车制作图像。 border-image-slice的文档中描述了不同的“区域”：

区域1-4是角落区域。每一个都用一次来形成最终边框图像的角落。

区域5-8是边缘区域。这些在最终边框图像中重复，缩放或以其他方式修改，以匹配元素的尺寸。

9区是中间区域。它默认被丢弃，但如果设置了关键字fill，则会像背景图像一样使用。

这是我的示例图片：

这是边界的一个有效例子：

.box-head {
  padding: 30px 100px;
  width: 60%;
  text-align: center;
  font-family: cursive;
  border-style: solid;
  border-image-source: url("//i.stack.imgur.com/ODGdz.png");
  border-image-slice: 30 100;
  border-image-width: 30px 100px;
  border-image-outset: 0;
  border-image-repeat: round;
}

h1 {
  font-size: 16px;
}

p {
  font-size: 12px;
}

<div class="box-head">
  <h1>Welcome fello plebs to this completely pointless website.</h1>
  <p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>

有关此方法的更多参考，请参阅：
Making a Border of a Single Repeating Image
Border Imaging

修改

以下是汽车旋转的示例：

.box-head {
  padding: 30px 50px;
  width: 60%;
  text-align: center;
  font-family: cursive;
  border-style: solid;
  border-image-source: url("//i.stack.imgur.com/YQ4EO.png");
  border-image-slice: 30 100;
  border-image-width: 30px 100px;
  border-image-outset: 0;
  border-image-repeat: round;
}

h1 {
  font-size: 20px;
}

p {
  font-size: 16px;
}

<div class="box-head">
  <h1>Welcome, humans, to this amazing website.</h1>
  <p> You may notice this website tickles your brain. I just started learning HTML and CSS, so the universe is wide open!</p>
</div>

图像作为框周围的边框

1 个答案:

修改

修改