[CSS 스타일 샘플] 이미지로 테두리 만들기

테두리에 이미지 넣는 방법은 여러번 올렸는데, 묻는 분들이 많네요.

 

이런 테두리 그릴 때 이미지를 씁니다.

물론 border를 그릴 수도 있지만.... 생각 하기도 싫네요 ㅎㅎ

 

이 테두리는 이 이미지로 만들었습니다.

이미지 크기는 상관 없어요.

모양만 같으면 돼요.

 

테두리 이미지는 border-image를 씁니다.

 

.box_TOC {

border : 10px solid transparent ;

border-image: url("../Images/TOC_border.png") 50 stretch;

padding : 10px;

}

 

이때 테두리의 두께는 이미지 두께와 전혀 상관 없어요.

border로 두께를 주면 됩니다.

border : 10px solid transparent;

border 두께에 따라 모양은 유지한 채 테두리 두께가 달라집니다.

 

투명한 테두리를 만들 때 transparent 속성을 씁니다.

그런데 간혹 border-image 태그를 안먹는 뷰어가 있더라구요.

이런 뷰어는

border : 10px solid #FF0000;

이렇게 넣어줘도 돼요. border-image가 적용되면 이미지로, 적용 안되면 빨간 테두리가 그려집니다.

요즘은 웬만한 뷰어가 border-image 적용이 되니 투명하게 그려줘도 됩니다.

 

전자책에서는 이렇게 보여요.