Как установить изображение как рамки iframe в HTML?

Question

Я пытаюсь установить закругленное угловое изображение в качестве границ iframe, используя css.

Вот мой iframe.css

iframe { border-image-source: url(pipe.jpg); 
width:500px; 
height:300px; 
} 

iframe.html

<iframe src="my_pics.html"> 
</iframe> 

Все работает нормально, но Iframe показывает черные границы вместо границ изображения.

Я делаю что-то неправильно здесь?

Answer 1

Перед применением пограничного изображения необходимо установить стиль рамки. В противном случае он отображает изображение с нулевой шириной.

iframe { 
    border:10px solid transparent; 
    border-image-source: url(pipe.jpg); 
    width:500px; 
    height:300px; 
} 

Возможно, вы также захотите установить border-image-slice. Это делит изображение, чтобы создать границу. Изображение всегда нарезано на девять секций: четыре угла, четыре края и середина. - w3schools

таким образом

iframe { 
    border:10px solid transparent; 
    border-image-source: url(pipe.jpg); 
    border-image-slice: 10; 
    width:500px; 
    height:300px; 
} 

Ваша граница значение среза изображения может быть что-то большее, чем 0, однако я считаю, для достижения наилучших результатов следует ширина изображения делится на 3.

JSFiddle Example