CSS3 테두리 예제 튜토리얼

CSS3 테두리

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

이 장에서는 다음 테두리 속성에 대해 알아봅니다.

border-radius

box-shadow

border-image

브라우저 지원

속성

브라우저 지원

Internet Explorer 9+는 border-radius 및 box-shadow를 지원합니다.

Firefox, Chr ome 및 Safari는 모든 최신 테두리 속성을 지원합니다.

참고: -webkit- 접두사가 붙은 Safari는 그림자 테두리를 지원합니다.

-o- 접두사가 있는 Opera는 테두리 이미지를 지원합니다.

CSS3 둥근 모서리

CSS2에 둥근 모서리를 추가하는 것은 까다롭습니다. 우리는 구석구석마다 다른 이미지를 사용해야 했습니다.

CSS3에서는 둥근 모서리를 만드는 것이 쉽습니다.

CSS3에서는 둥근 모서리를 만드는 데 border-radius 속성이 사용됩니다.

이것은 둥근 테두리입니다!

예

div에 둥근 요소 추가:

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

CSS3 상자 그림자

CSS3의 box-shadow 속성은 그림자를 추가하는 데 사용됩니다.

예

div에 box-shadow 속성 추가

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

CSS3 borderImage

CSS3 border-image 속성을 사용하면 이미지를 사용하여 테두리를 만들 수 있습니다:

border-image 속성을 사용하면 이미지를 테두리로 지정할 수 있습니다! 위의 테두리를 만드는 데 사용된 원본 이미지:

div의 이미지를 사용하여 테두리 만들기:

예

div의 이미지를 사용하여 테두리 만들기

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 */
}

[관련 추천]

1. 특별 추천: "php Programmer Toolbox" 버전 V0.1 다운로드

2. 무료 CSS 온라인 동영상 튜토리얼

3. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 CSS3 테두리 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!