CSS 의 기본 모양 기능은 무엇입니까? 사용하는 방법?

이 글에서는 CSS의 기본 도형 기능을 누구나 쉽게 이해할 수 있도록 자세히 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글에서【이란 무엇인가요? 무슨 소용이 있나요? ] 에 대한 관련 지식을 소개하고 있어 참고하실 수 있습니다. 이번 장에서는 에서 지원하는 기본 Shape 기능을 자세히 알려드리고자 합니다.

우선 CSS 에서 지원되는 네 가지 기본 도형 함수가 있다는 것을 알아야 합니다:

1, inset()--Rectangle

2, Circle()--circle

3. ellipse()--ellipse

4.polygon()--polygon

이 네 가지 기본 도형 함수를 자세히 살펴보고 어떻게 사용되는지 살펴보겠습니다.

inset()

구문:

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

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

약어 구문을 따르므로 1개, 2개 또는 4개의 값이 주어지면 4개의 오프셋을 설정할 수 있습니다. 오프셋 값을 지정하면(예: 15px) 상단, 오른쪽, 하단 및 왼쪽 오프셋으로 사용됩니다. 두 개의 오프셋 값을 지정하는 경우(예: 20px 10px) 상단 및 하단 오프셋과 오른쪽 및 오른쪽 오프셋을 각각 지정합니다. 세 개의 값이 지정되면(예: 10px 15px 20px) 첫 번째는 위쪽 오프셋을 지정하고, 두 번째는 오른쪽 및 왼쪽 오프셋을 지정하고, 세 번째는 아래쪽 오프셋을 지정합니다. 4개의 값을 지정하면 첫 번째는 위쪽 오프셋, 두 번째는 오른쪽 오프셋, 세 번째는 아래쪽 오프셋, 네 번째는 왼쪽 오프셋으로 사용됩니다.

여백과 마찬가지로 오프셋 값도 절대 길이나 백분율로 설정할 수 있습니다.

선택적 매개변수 는 직사각형의 꼭지점에 삽입되는 호의 각도를 정의하는 데 사용됩니다. 이 매개변수는 CSS의 border-radius 속성과 동일한 구문을 사용하여 1~8개의 값을 지정합니다. 의 네 모서리의 반올림된 값입니다. 지정된 테두리 반경은 round 키워드로 시작해야 합니다. 또한 4개의 오프셋을 설정하기 위해 1개, 2개 또는 4개의 값을 제공하는 한계 단축 구문을 따릅니다.

다음은 모두 유효한 inset() 직사각형 모양 선언입니다.

가장자리가 위쪽과 아래쪽 가장자리에서 안쪽으로 10%, 상자 참조 상자의 왼쪽과 오른쪽이 20%로 설정된 5px 둥근 직사각형

inset(10% 20% round 5px);

만들기 비원형 인라인 직사각형, 참조 상자를 위쪽에서 안쪽으로 15px, 왼쪽과 오른쪽으로 20px, 아래쪽 가장자리에서 30px로 설정합니다.

inset(15px 20px 30px);

참조 상자의 가장자리를 기준으로 네 방향 모두에서 안쪽으로 25%로 설정된 직사각형을 만듭니다. 왼쪽 상단과 오른쪽 하단 모서리는 모두 둥근 10px, 오른쪽 상단과 왼쪽 하단 모서리는 30px

inset(25% round 10px 30px);

10px 둥근 모서리가 있는 직사각형, 위쪽에서 10px, 왼쪽에서 40px, 오른쪽에서 20px, 거리 안쪽으로 설정됨 참조 상자 아래쪽 가장자리에서 30px

inset(10px 20px 30px 40px round 10px);

circle()

구문:

circle() = circle( [<shape-radius>]? [at <position>]? )
/ *其中.. * /
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

circle() 함수는 원을 정의하는 데 사용됩니다. 물음표는 두 매개변수가 모두 선택사항이며 생략될 수 있음을 나타냅니다. 하나가 생략되면 브라우저는 매개변수를 기본값으로 설정합니다.

위치 매개변수를 생략하면 원의 중심이 사용되는 요소의 중심이 됩니다. background-position 속성 구문과 동일한 구문을 사용하여 위치를 지정할 수 있습니다. 위치 매개변수 앞에는 at이라는 단어가 옵니다.

shape-radius 매개변수는 원의 반경을 지정합니다. 절대 길이 또는 백분율로 설정할 수 있습니다. 여기의 백분율 값은 참조 상자의 사용된 너비와 높이에서 구문 분석됩니다. 음수 값은 허용되지 않습니다.

길이와 백분율을 사용하여 원의 반경을 지정하는 것 외에도 Nearest-side 또는 Furthest-side라는 두 키워드 중 하나를 사용하여 설정할 수도 있습니다. 가장 가까운 쪽이 기본값입니다. 즉, 이 매개변수를 생략하고 원의 반경을 지정하지 않으면 브라우저는 모든 차원에서 요소 중심에서 가장 가까운 변까지의 길이를 반경의 길이로 사용합니다. . 먼 쪽은 중앙에서 가장 먼 쪽까지의 길이를 사용합니다.

다음 이미지는 가장 가까운 쪽과 가장 먼 쪽 반경 값의 시각적 비교를 보여줍니다.

다음은 모두 유효한 Circle() 모양 선언입니다.

기본값 사용: 가장 가까운 반경 요소 중앙에 위치한 원

circle();

반경 100px, 가로 30%, 세로 50%*

circle(100px at 30% 50%);

반지름이 길이의 절반인 원을 정의합니다. 요소 좌표계

circle(farthest-side at 25% 25%);

에서 25% 25% 좌표에 위치한 가장 긴 변은 중심이 가로 및 세로로 500px, 300px이고 반경이 10em

circle(10em at 500px 300px);

ellipse()

인 원을 정의합니다.

문법:

ellipse（）= ellipse（[ < shape-radius > {2}]？[at < position > ]？）
/ *其中.. * /
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

ellipse()函数定义椭圆形状。它采用与circle()函数相同的参数列表和值，除了不是采用一个形状半径值，而是采用两个半径rx和ry，它们按顺序表示椭圆的x轴和y轴半径。此外，此处的百分比值是根据参考框的使用宽度（对于rx值）和使用的高度（对于ry值）来解析的。

有关circle()可能的参数，其含义和可能的值的更多信息，请参阅上面的circle()函数说明。

注意：

1、closest-side：

对于圆，这是任何维度中最近的一侧。对于椭圆，这是半径尺寸中最接近的一侧。

2、farthest-side：

对于圆，这是任何尺寸中最远的一面。对于椭圆，这是半径尺寸中最远的一侧。

以下是所有有效的ellipse()形状声明：

使用默认值：

ellipse();

椭圆x半径100px和y半径50px，水平放置30％，垂直放置50％

ellipse(100px 50px at 30% 50%);

定义一个椭圆，其x半径是长度的一半；最长的一侧，y半径是长度的一半；较短的一侧，位于元素坐标系上的坐标分别为：25% 25%

ellipse(farthest-side closest-side at 25% 25%);

定义一个椭圆，其中心位于500px；水平、垂直、x和y都为300 px，半径为10em（这基本上是一个圆圈）

ellipse(10em 10em at 500px 300px);

polygon（）

语法：

polygon（）= polygon（[ < fill-rule >，]？[ < shape-arg >  < shape-arg > ]＃）
/ *其中.. * /
<shape-arg> = <length> | <percentage>

polygon()函数用于使用任意数量的点定义更复杂的任意形状。

该函数接受一组坐标对（ ），每对指定一个点的位置。第一个参数表示点的x位置，第二个参数表示y位置。这组点构成了形状。浏览器将列表中的最后一个顶点与列表中的第一个顶点连接以关闭多边形，因此你不必自己执行此操作。

坐标对以逗号分隔，可以使用绝对长度或百分比进行设置。

除了坐标对的集合外，该polygon()函数还可以使用一个名为the的可选参数fill-rule。这指定了如何处理多边形内部可能与自身相交的区域。有关fill-rule详细信息，请参阅SVG中的属性 可能的值是nonzero或evenodd。省略时的默认值是nonzero。

以下是所有有效的polygon()函数声明：

polygon(0 0, 100% 100%, 0 100%);

polygon(0 0, 100% 100%, 0 100%);

polygon(50px 0px, 100px 100px, 0px 100px);

polygon(170.67px 291.00px, 126.23px 347.56px, 139.79px 417.11px, 208.92px 466.22px, 302.50px 482.97px, 343.67px 474.47px, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, 336.50px 235.26px, 299.67px 196.53px, 259.33px 209.53px, 217.00px 254.76px);

polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);

接下面了我们看看使用基本形状函数定义基本形状的示例和实例：

示例1：指定参考框，定义一个圆

.element {  
   shape-outside：circle（100px at 50％50％）margin-box;
}

使用shape-outside属性定义用于更改元素浮动区域形状的形状。注意如何在属性声明中定义形状的引用框。

上面代码的结果看起来类似于下图：

示例2：定义了与clip-path属性一起使用的多边形形状，以将元素剪切为定义的形状：

.element {     
    clip-path：polygon（26px 111px，222px 386px，311px 281px，470px 393px，660px 293px，604px 47px，505px 107px，318px 37px，42px 107px）;
}

实例：使用clip-path属性将元素剪切为定义为属性值的形状。定义的形状是使用该polygon()函数的随机多边形形状。

html代码：

<div class="container">
  <p>未指定参考框，因此默认情况下设置边框。</p>
  <div class="element"></div>
</div>

css代码：

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  width: 100%;
  height: 0;
  padding-top: 75%;
  background: url(http://tympanus.net/codrops-playground/assets/images/cssref/datatypes/basic-shape/spring.jpg);
  background-size: 100% 100%;
  border: 1px solid grey;
  -moz-clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
  -webkit-clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
  clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
}

效果图：

总结：以上就是本篇文章的全部内容，大家可以自己动手试试，制作不同的形状，希望能对大家的学习有所帮助。

위 내용은 CSS 의 기본 모양 기능은 무엇입니까? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!