0

我查看了这个文档，border-image我觉得我理解每个属性值应该做什么，但是在使用数字时，我似乎无法正确理解。

这是我正在处理的内容的简要版本的JSFiddle ：

body {
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 100%;
}
#About {
  margin-left: 250px;
  margin-right: 250px;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 20px;
  border-style: solid;
  border-width: 30px;
  border-image: url(http://www.sandranathan.net/wp-content/uploads/2012/02/ROSE-BORDER-11668791_l-72.jpg) 600 500 600 round;
}
#About p,
h1 {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 28px;
}
<div id="About">
  <img src='https://c2.staticflickr.com/8/7153/6852073179_00961ba267.jpg' class='close_button' alt=null style="width: 5%; height: 5%" />
  <p>some stuff that needs a border</p>
</div>

当我将 , , 的值border-image: slice分别width设置outset为 600、500,600 时，就图像比例而言，它似乎有点接近我想要的值。为了让图像沿着左侧和右侧移动，我必须减少弄乱比例的向内偏移。有人可以向我解释一下我添加或忘记的东西是什么让这个工作无法顺利进行......或者border-image总是这样荒谬的工作？

4

0 回答 0