CSS3 경계선(Border)

CSS를 사용하여3요소의 경계선에 이미지를 적용할 수 있습니다.

CSS를 사용하여3경계선

CSS3두 가지 새로운 속성이 제공되어 요소의 경계선을 더 우아하게 스타일링할 수 있습니다- border-image는 경계선의 border에 이미지를 추가하는 데 사용됩니다.-radius 속성, 그리고 이미지를 사용하지 않고 원형角을 만들기 위해 사용할 속성을 소개합니다.

다음 장에서는 CSS3의 이 새로운 경계선 속성에 대해 다른 경계와 관련된 속성에 대해 확인하십시오.CSS 경계선가이드

CSS를 만들기 위해3원형角

이 border-radius 속성은 원형角을 만들기 위해 사용될 수 있습니다. 이 속성은 일반적으로 외경계边缘의 모서리의 형태를 정의합니다. CSS에서3이전에, 원형角을 만들기 위해 상대적으로 번거로운 캔버스 이미지를 사용했습니다.

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　background:　#ffb6c1;
　　　　border:　2px　solid　#f08080;
　　　　border-radius:　20px;
}

CSS 추가3경계 이미지

border-image 속성은 요소의 경계로 사용할 이미지를 지정할 수 있도록 합니다.
경계선의 디자인은 border-image 소스 URL에 지정된 이미지의 lateralside와 모서리에서 생성됩니다. 경계 이미지를 여러 가지 방식으로 쪼개고, 반복하고, 줄이고, 늘려서 경계 이미지 영역의 크기에 맞게 맞추 수 있습니다.

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　-webkit-border-image:　url("border.png")　30　30　round;　/*　사파리　3.1-5　*/
　　　　-o-border-image:　url("border.png")　30　30　round;　/*　오페라　11-12.1　*/
　　　　border-image:　url("border.png")　30　30　round;
}