집 > 기사 > 웹 프론트엔드 > <기본형>이란 무엇인가요? 무슨 소용이 있나요?

<기본형>이란 무엇인가요? 무슨 소용이 있나요?

青灯夜游원래의: 2018-11-12 14:52:343198검색

이란 무엇인가요? 무슨 소용이 있나요? 이 글에서는 CSS의 가 무엇이고 그 기능이 무엇인지 소개하여 누구나 의 사용법을 이해할 수 있도록 하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 기본형이란?

은 기본 그래픽을 나타내는 CSS 데이터 유형으로, 클립 경로 및 모양 외부 속성에 따라 작동합니다. [관련 영상 튜토리얼 추천: css3 tutorial]

데이터 유형은 기본 모양 함수로 지정할 수 있습니다. 즉, 기본 모양 함수를 사용하여 기본 모양을 정의할 수 있습니다. 아래의 "기본 모양 함수" 섹션에서 가능한 모양 함수 값과 이에 대한 간략한 설명을 나열하세요.

그런 다음 기본 모양은 속성(예: 모양 외부 속성 또는 클립 경로 속성)에 값으로 전달됩니다. 이 속성은 요소에 모양을 적용하여 주변의 콘텐츠 흐름을 변경하거나 요소를 클립하는 데 사용됩니다. 모양을 각각 정의하십시오.

2. 모양 참조 프레임

요소의 높이와 너비 외에도 요소의 프레임 모델 프레임(여백 상자, 콘텐츠 상자, 패딩 상자) 및 테두리 상자도 가능합니다. 요소의 모양 범위를 지정하기 위한 참조로 사용됩니다. 참조 프레임은 4개의 프레임 중 하나일 수 있습니다.

을 사용하여 모양을 정의하는 경우 참조 상자는 값(기본 모양 기능)을 사용하여 각 속성으로 정의됩니다(아래 예제 섹션 참조). 기본 형상의 좌표계 원점은 기준 좌표계의 왼쪽 상단에 위치하며, x축은 오른쪽으로 이동하고, y축은 아래쪽으로 확장됩니다. 백분율로 표현된 모든 길이는 참조 상자의 사용된 치수에서 확인됩니다(백분율로 정의된 길이는 사용된 치수와 관련된 상자 모델에 의해 재정의됨). 참조 상자를 지정하지 않으면 테두리는 클립 경로 속성의 참조 상자로 사용되며, 테두리는 Shape-outside 속성에서 사용되는 모양에 사용됩니다.

2. 기본 도형 기능

다음은 현재 에서 지원하는 그래픽입니다. 모든 값은 함수 표현식으로 정의되며 값 정의 구문을 따릅니다.

1.inset()

구문:

inset( <shape-arg>{1,4} [round <border-radius>] )

설명:

inset() 함수는 삽입 사각형을 정의합니다.

내부 참조 상자 가장자리(상단, 오른쪽, 하단 및 왼쪽 테두리 및 정점)의 오프셋을 가리키는 1~4개의 오프셋 값이 필요합니다. 이는 요소 내의 삽입 직사각형 위치를 지정합니다.

선택적 매개변수 는 직사각형의 정점에 삽입되는 호 각도를 정의하는 데 사용됩니다.

2, Circle()

circle( [<shape-radius>]? [at <position>]? )

circle() 함수는 삽입 원을 정의합니다.

매개변수는 원의 반지름인 r을 나타냅니다. 이 매개변수의

매개변수는 원의 중심 위치를 정의합니다. 기본값은 상자 모델의 중심입니다.

3. ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

ellipse() 함수는 타원을 정의합니다.

여기서 rx는 x축 방향 반경을 나타냅니다. , ry는 y축 방향의 반경을 나타냅니다. 이 매개변수는 음수 값을 허용하지 않습니다.

매개변수는 타원 중심의 위치를 정의합니다. 기본값은 상자 모델의 중심입니다.

4.polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<shape-arg> = <length> | <percentage>

polygon() 함수는 다각형을 정의합니다

은 채우기 규칙(filling rule), 즉 다각형을 채우는 방법을 나타냅니다. 선택적 값은 0이 아니고 홀수입니다. 이 매개변수의 기본값은 0이 아닙니다.

3. 기본 도형에 대한 설명

기본 도형의 계산된 값

기본 도형 함수의 값은 지정된 대로 계산되지만 다음과 같은 예외가 있습니다.

1. 생략된 값을 포함하고 기본값을 계산합니다.

2. 값 Circle() 또는 ellipse()는 왼쪽 위 원점에서 한 쌍의 오프셋(가로 및 세로)으로 계산되며 각 오프셋은 절대 길이와 백분율의 조합으로 제공됩니다.

3. inset()은 8개의 값 모두의 확장 목록을 계산합니다.

모양에 대한 참조 상자는 이러한 모양을 값으로 갖는 속성의 일부로 정의됩니다.

기본 도형 보간(도형 간 애니메이션)

하나의 기본 모양과 두 번째 기본 모양 사이를 보간하려면 다음 규칙이 적용됩니다. 모양 함수의 값은 간단한 목록으로 삽입됩니다. 목록 값은 가능한 경우 길이, 백분율 또는 계산으로 삽입됩니다. 목록 값이 이러한 유형 중 하나가 아니지만 동일한 경우(예: 0이 아닌 경우 두 목록에서 동일한 목록 위치를 찾는 경우) 값이 보간됩니다.

1. 두 모양 모두 동일한 참조 프레임을 사용해야 합니다.

2. 두 도형이 동일한 유형이고 해당 유형이 ellipse() 또는 Circle()이고 반경이 가장 가까운 쪽이나 가장 먼 쪽 키워드를 사용하지 않으면 도형 함수의 각 값 사이에 보간됩니다.