только изображение сверху, без нарезки?

Question

Кажется, что CSS3 border-image работает, разрезая и разделяя изображение.

Предположим, у меня есть квадратный png звезды размером 20px, который я хочу повторить только вдоль верхней границы.Как бы я составил правило CSS?

т.е. без нарезки, без растяжения, без скругления ... просто повторите маленький квадратный png только по верхней границе.

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

Answer 1

.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; 
}

Answer 2

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;
}