테두리 이미지 속성을 사용하는 방법은 무엇입니까? 테두리 이미지 속성 튜토리얼에 대한 자세한 설명-CSS 튜토리얼-php.cn

테두리 이미지 속성을 사용하는 방법은 무엇입니까? 테두리 이미지 속성 튜토리얼에 대한 자세한 설명

云罗郡主

풀어 주다： 2018-10-23 16:06:49

앞으로

4044명이 탐색했습니다.

이 기사에서는 border-image 속성을 사용하는 방법을 설명합니다. border-image 속성에 대한 자세한 튜토리얼은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고하시면 좋겠습니다.

CSS 입문 튜토리얼에서 우리는 테두리에 실선, 점선, 점선 등 몇 가지 간단한 형태만 있는 테두리 스타일에 대해 배웠습니다. 그렇다면 테두리에 아름다운 배경 이미지를 추가하려면 어떻게 해야 할까요?

CSS3에서는 border-image 속성을 사용하여 테두리에 배경 이미지를 추가할 수 있습니다.

설명:

구문 분석을 통해 테두리 배경 이미지를 설정하려면 border-image 속성을 사용하여 3가지 매개변수를 설정해야 한다는 것을 알 수 있습니다.

(1) 이미지 경로

(2) 잘라낸 이미지의 너비( 4개 스트립) 측면의 너비는 시계 방향으로 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 테두리 속성의 4개 측면 순서와 유사합니다.)

(3) 그림 타일링 방법

아래 사진을 찍고 싶습니다. (90px×90px) 요소 테두리의 배경 이미지로 무엇을 해야 합니까? (아래의 각 작은 사각형은 30px×30px입니다.)

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-image属性</title>
    <style type="text/css">
    #div1
    {
        width:210px;
        height:150px;
        border:30px solid gray;
        border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
        -webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
        -moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

로그인 후 복사

테두리 이미지 속성을 사용하는 방법은 무엇입니까? 테두리 이미지 속성 튜토리얼에 대한 자세한 설명