<基本形状>とは何ですか?用途は何ですか?-CSSチュートリアル-php.cn

<基本形状>とは何ですか?用途は何ですか?

青灯夜游

リリース： 2018-11-12 15:52:02

オリジナル

3209 人が閲覧しました

とは何ですか?用途は何ですか?この記事では、CSS のとは何か、その機能を誰でも理解できるように紹介します。困っている友人は参考にしていただければ幸いです。

1. の基本的な説明は次のとおりです。何？

は、基本的なグラフィックスを表す CSS データ型で、clip-path プロパティとshape-outside プロパティに作用します。 [関連ビデオチュートリアルの推奨: css3 チュートリアル]データ型は、基本シェイプ関数によって指定できます。つまり、基本シェイプ関数を使用して、基本的な形状を定義します。以下を参照してください。「基本的な形状関数」セクションには、可能な形状関数の値とその簡単な説明がリストされています。

基本的な形状は、プロパティ (shape-outside プロパティや Clip-path プロパティなど) に値として渡されます。これらのプロパティは、形状を要素に適用して要素の周囲のコンテンツの流れを変更するために使用されます。または、要素をクリップして形状を個別に定義します。

2. 形状参照ボックス

要素の高さと幅に加えて、要素のボックスモデルボックス:マージンボックス (マージン) -box)、content-box (content-box)、padding-box (padding-box)、border (border-box) は、要素上の形状範囲を指定するための参照としても使用できます。参照フレームは 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() 関数は挿入円

を定義します。は円の半径ですが、このパラメータの値として負の数値は受け入れられません。円の中心の位置を定義します。デフォルト値はボックスモデルの中心です。

3. ellipse()

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

ログイン後にコピー

ellipse() 関数は楕円を定義します。

値はそれぞれ rx と ry です。rx は x 軸方向の半径を表し、ry は y 軸方向の半径を表します。このパラメーターは負の値を受け入れません。このパラメータは、楕円の中心の位置を定義します。デフォルト値はボックスモデルの中心です。

4.polygon()

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

ログイン後にコピー

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

ログイン後にコピー

polygon() 関数は、ポリゴンを定義します。

)、つまり多角形を塗りつぶす方法です。オプションの値は非ゼロと偶数です。このパラメータのデフォルト値はゼロ以外です。

3. 基本形状の説明

基本形状の計算値

基本形状関数の値は指定どおりに計算されますが、

1 などの例外を除き、省略された値も含めてデフォルト値が計算されます。 2. 値のcircle() または ellipse() は、左上の原点からのオフセットのペア (水平方向と垂直方向) として計算され、各オフセットは絶対値の組み合わせとして指定されます。長さとパーセンテージ。

3. inset() は、8 つのすべての値の拡張リストを計算します。

形状の参照ボックスは、それらの形状を値として持つプロパティの一部として定義されます。

基本的な形状の補間 (形状間のアニメーション)

1 つの基本シェイプと 2 番目の基本シェイプの間の補間には、次のルールが適用されます。シェイプ関数の値は単純なリストとして挿入されます。リストの値は、可能な場合、長さ、パーセンテージ、または計算として補間されます。リストの値がこれらのタイプのいずれでもないが同じである場合 (たとえば、ゼロ以外の値は両方のリストで同じリスト位置を見つけます)、値は補間されます。

1. 両方の形状は同じ参照フレームを使用する必要があります。

2. 両方の形状が同じタイプであり、そのタイプが ellipse() または Circle() であり、どちらの半径も最近接側または最も遠い側のキーワードを使用しない場合、形状関数内でそれぞれの間を補間します。価値。

3. 両方の形状が inset() 型の場合、形状関数の各値の間で補間が実行されます。

4. 両方のシェイプが Polygon() タイプの場合、2 つのポリゴンは同じ数の頂点を持ち、同じを使用してシェイプ関数の各値の間で補間されます。

5. それ以外の場合は、補間は指定されません。

4. ブラウザの互換性

<基本形状>とは何ですか?用途は何ですか?