Question

CSS3边框图像似乎可以通过切片和分割来工作。

假设我有一个20像素的正方形png星星，我只想沿顶部边框重复。我该如何编写CSS规则？

即没有切片，没有拉伸，没有圆形...仅沿顶部边框重复一点正方形png。

.div-with-top-border {
  border-image: url('/images/star.png') ? ? repeat?;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

Answer 1

Repeat：重复或平铺图像。

Round：平铺图片，但仅适合整个平铺。

下面的代码将创建20px的顶部透明边框，并将star.png图像设置为背景。 border-image中的数字非常类似于border-width属性，并且它们以相同的顺序指定：上，右，下，左。您可以使用百分比或像素。奇怪的是，百分比要求为“％”，而列出的像素应不含“ px”：

.div-with-top-border {
   border-top: 20px solid transparent;
   border-image: url('/images/star.png') 20 0 0 0 round;
}

Answer 2

.div-with-top-border { 
   display: block; 
   border-top: 20px solid transparent; 
   background-repeat: repeat-y; 
   border-image: url('/images/star.png'); 
   border-bottom: 0; 
   border-left: 0; 
   border-right: 0; 
}

仅在顶部有边框图像，没有切片吗？

2 个答案: