div의 다른 테두리 이미지

Question

동일한 div에서 2 개의 다른 테두리 이미지를 사용하려고합니다. 하나의 이미지가 위쪽을 따라, 하나는 아래쪽을 따라 반복됩니다.

하단 테두리 이미지를 표시 할 수 있습니다. 또한 상단에 같은 테두리 이미지의 반복을 얻을 수 있습니다,하지만 난 국경 - 하단 이미지 또는 테두리 탑 이미지를 사용하려고하면,도 표시됩니다

#mainImage{ 
    border-bottom:8px solid #fff; 
    border-bottom-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_sage_02.png") 7 repeat; 
    border-top:8px solid transparent; 
    border-top-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_white.png") 7 repeat; 
    border-left:0px; 
    border-right:0px; 
} 

이 가능합니까?

Answer 1

경계 이미지를 사용한 적이 한번도 없었습니다. CSS에는 거의 사용되지 않는 태그가 있다고 가정합니다.

당신이 원하는 결과를 생성 할 수있는 훌륭한 옵션은 다음과 같이 사용하는 것입니다 : before : and : after 스타일은 경계 이미지보다 융통성이 있습니다. 왜냐하면 정의 할 수 있기 때문입니다. before : and after as almost 별도의 요소가 있지만 기본적으로 요소를 상대적으로 만드는 요소의 일부입니다.

#mainImage:before {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:''; } 
#mainImage:after {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:'';}