글
[CSS 스타일 샘플] 이미지로 테두리 만들기
EPUB 편집 가이드/EPUB을 위한 CSS
2020. 7. 23. 08:53
테두리에 이미지 넣는 방법은 여러번 올렸는데, 묻는 분들이 많네요.
이런 테두리 그릴 때 이미지를 씁니다.
물론 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 적용이 되니 투명하게 그려줘도 됩니다.
전자책에서는 이렇게 보여요.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
[CSS 스타일 샘플] 간단해 보이지만 복잡했던 장제목 스타일 (0) | 2020.08.06 |
---|---|
EPUB에서 일본어 세로쓰기 (0) | 2020.07.31 |
[CSS 스타일 샘플] 이미지로 테두리 만들기 (0) | 2020.07.23 |
[CSS 스타일 샘플] 많이 쓰는 세로 제목 스타일 (0) | 2020.07.17 |
[질문&답변] 화살표 선이 들어간 제목 스타일 (0) | 2020.06.10 |
!important - 리디북스 PC 뷰어에서 div-margin 안먹는 문제 (0) | 2020.03.18 |