Latest web development tutorials

CSS3 국경

CSS3 국경

CSS3를 사용하면, 둥근 모서리를 만들 그림자 상자를 추가 할 수 있습니다 포토샵과 같은 디자인 프로그램을 사용하지 않고 테두리의 이미지로.

이 장에서는 다음과 같은 테두리 속성을 배우게됩니다 :

  • 국경 반경
  • 상자 그림자
  • 테두리 이미지

CSS3는 둥근 모서리

CSS2에서 까다로운 필렛을 추가합니다. 우리는 다른 이미지를 구석 구석 사용했다.

CSS3에서는 둥근 모서리를 작성하는 것은 매우 쉽습니다.

CSS3에서 국경 반경 속성은 둥근 모서리를 만드는 데 사용됩니다 :

이 테두리를 둥글게된다!

예

div 요소에 필렛을 추가합니다 :

div
{
border:2px solid;
border-radius:25px;
}

»시도

CSS3 상자 그림자

CSS3 상자 그림자 속성은 그림자를 추가하는 데 사용됩니다 :


예

사업부에 상자 그림자 속성을 추가

div
{
box-shadow: 10px 10px 5px #888888;
}

»시도

CSS3 국경 사진

CSS3 국경 이미지 속성을 사용하면 테두리를 만들려면 이미지를 사용할 수 있습니다 :

테두리 이미지 속성은 테두리로 이미지를 지정할 수 있습니다! 원본 이미지 위의 테두리를 만들 때 사용합니다 :

사업부 테두리를 만들려면 사진을 사용합니다 :

경계

예

국경 사업부를 만들 사진을 사용하여

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

»시도

새로운 국경 등록

재산 설명 CSS
테두리 이미지 모든 이미지의 테두리 약식 속성 설정. 3
국경 반경 * - - 반경 약식 속성 네 경계를 설정하기위한 하나 3
상자 그림자 하나 이상의 드롭 다운 상자 그림자를 부착 3