웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
border-image 본문
border-image
- border-image 속성은 테두리에 이미지를 배경처럼 적용하는 속성으로 css3에서 새로 생긴 border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat 같은 속성들의 축약속성이다.
Value |
Description |
---|---|
border-image-source | 이미지의 경로를 지정하는 속성 |
border-image-slice | 이미지 테두리의 안쪽 오프셋 |
border-image-width | 이미지 테두리의 너비값을 지정하는 속성 |
border-image-outset | 이미지 테두리의 바깥쪽 오프셋 |
border-image-repeat | 이미지의 반복 여부를 지정하는 속성 |
ex) 보더라인에 이미지 주기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<!DOCTYPE HTML> < html > < head > < meta charset = "utf-8" > < title >border-image</ title > < style type = "text/css" > div { border-width:15px; width:250px; padding:10px 20px; } #round { border-image:url(border.png) 30 30 round; /* round 동일 하게 반복 시켜주는 것 */ } #stretch { border-image:url(border.png) 30 30 stretch; /* stretch는 쭉늘려준다는 의미 이미지경로, 30픽셀을 상하, 30픽셀을 좌우 */ } </ style > </ head > < body > < div id = "round" >round 동일 하게 반복 시켜주는 것 </ div > < br /> < div id = "stretch" >tretch는 쭉늘려준다는 의미 이미지경로, 30픽셀을 상하, 30픽셀을 좌우</ div > < p >사용된 이미지</ p > < img src = "border.png" /> </ body > </ html > |
ps. 이해가 어렵다면 아래 링크를 참조하면 이해가 쉬울 것이다.
Border-image.com/
'css3' 카테고리의 다른 글
word-wrap (0) | 2013.10.08 |
---|---|
text-shadow (0) | 2013.10.08 |
background (1) | 2013.10.02 |
box-shadow (0) | 2013.10.02 |
border-radius (0) | 2013.10.01 |