我使用css-border-image將電視節目海報放入底部有支架的水平電視圖像中，因此圖像不應該位于邊界圖像的中心——我想讓它稍微高一點，或者垂直拉伸邊界圖像，以便圖像適合正確的位置。

.tv {
  height: 170px;
  border: 9px solid transparent;
  border-image: url("https://i.stack.imgur.com/xyxRN.png") 15 stretch;
}

<img class="tv" src="https://m.media-amazon.com/images/M/MV5BOWFjODRhMDktMTE3My00ODQzLThmODctYmM2ZmU5YmY0ZGVkXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg">

用背景圖片填充會更容易

.tv {
  height: 170px;
  padding: 6px 8px 20px;
  background: url("https://i.stack.imgur.com/xyxRN.png") 0/100% 100%;
}

<img class="tv" src="https://m.media-amazon.com/images/M/MV5BOWFjODRhMDktMTE3My00ODQzLThmODctYmM2ZmU5YmY0ZGVkXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg">

你可以試著為border-image-slice找一些合適的值:https://developer . Mozilla . org/en-US/docs/Web/CSS/border-image-slice

.tv {
  height: 170px;
  border: 9px solid transparent;
  border-image: url("https://i.stack.imgur.com/xyxRN.png") stretch;
  border-image-slice: 10 10 62;
}

<img class="tv" src="https://m.media-amazon.com/images/M/MV5BOWFjODRhMDktMTE3My00ODQzLThmODctYmM2ZmU5YmY0ZGVkXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg">