DIV의 이미지 테두리

Question

폭 480px 및 높이 360px의 이미지를 사용하여 테두리로 div에 적용 할 수 있습니까? 테두리로 아래의 CSS 코드를 구현하는 것이 가능하다는 것을 알고 있지만 대신 이미지를 사용하는 방법을 알아낼 수 없습니다.

border:1px solid blue; 

Answer 1

CSS3 사양은 border-image 속성이 있습니다. 사용 방법에 대한 정보는 http://css-tricks.com/understanding-border-image/에서 확인하십시오.

은 요약하면 : 귀하의 이미지와 요소의에 이미지를 적용하는 동작을 슬라이스 이미지에 URL을 제공하여

border-image: url(border-image.png) 25% repeat; 

:

당신은 국경 영상과 같이 적용 경계.

Answer 2

사실, 트릭을 사용하여이를 수행 할 수 있습니다. 내 demo을 확인하십시오. Google을 테두리 이미지로 사용하십시오.

기본적으로 아이디어에는 두 개의 div가 있습니다.

<div id="borderDiv"><!-- This will serve as the border --> 
    <div id="inner"> 
    </div> 
</div> 

CSS

#borderDiv { 
    padding: 2px; /* This is the width of the border :P */ 
    background: url("borderimage.png"); 
} 
#inner { 
    background: #fff; 
} 

Answer 3

두 CSS3에 답하고 중첩 된 div를 가진 사람이 좋은 답변을하지만, 당신이 가장 가치에 따라 달라집니다. 테두리 이미지가 디자인에 중요 할 경우, 가장 널리 지원되는 솔루션을 사용하는 것이 좋습니다. 이 경우 중첩 된 div가됩니다. 그러나 의미 론적 마크 업과 용이성이 더 중요한 경우 CSS3를 사용하여 테두리 이미지를 디자인하십시오. 브라우저 지원이 줄어들어 효과를 느낄 수있는 잠재 고객이 적을 것입니다.

가장 중요하게는 주요 잠재 고객과 그들이 사용하는 브라우저를 알고 있어야합니다. 그들을위한 디자인.