1.形

Shapeの外観は、長方形の形状のみを使用して形状を多様化するという従来のCSSの恥ずかしさを打ち破りました。

基本ケースの説明として、次の構造とスタイルを使用します。

<div class="txtBox">
   <div class="txtBox_content">
       <p>
           小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
       </p>
       <p>
           “小说”出自《庄子·外物》。
       </p>
       <p>
           人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、爱情、家庭伦理篇、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
       </p>
       <p>
           “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」庄子所谓的「小说」，是指琐碎的言论，与小说观念相差甚远。直至东汉桓谭《新论》：「小说家合残丛小语，近取譬喻，以作短书，治身理家，有可观之辞。」班固《汉书．艺文志》将「小说家」列为十家之后，其下的定义为：「小说家者流，盖出于稗官，街谈巷语，道听途说者之所造也。」才稍与小说的意义相近。而中国小说最大的特色，便自宋代开始具有文言小说与白话小说两种不同的小说系统。文言小说起源于先秦的街谈巷语，是一种小知小道的纪录。
       </p>
   </div>
</div>

*{  margin: 0; padding: 0;}
.txtBox{
    width: 600px;
    height: 600px;
    background: #eee;
    margin-right: auto;
    margin-left: auto;
}
.txtBox_content{
    width: 600px;
    height: 600px;
    background: #999;
}

1.形状値

多くの参考文献はそれ<basic-shape>を呼んでいます、それは形状の定義であるため、私はそれを値の形状と呼ぶことを好みます、それは属性値としてclip-pathまたはshape-outsideプロパティで使用することができます。

可能なデータは次のとおりです。

（1）挿入図（）

inset()この関数は、形状の内側の長方形の領域を指定します。そのパラメータは、4つのオフセット値とオプションの丸角です。

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

inset（）を書く正しい方法は次のとおりです。

inset(10% 20% round 5px) 
/*一个带5像素圆角的矩形，上下2条边向内10%，左右2条边向内20%*/
inset(15px 20px 30px)  /* 上边距   左右边距  下边距 */
inset(25% round 10px 30px) 
inset(10px 20px 30px 40px round 10px)

といった：

.txtBox_content{
    clip-path: inset(10% 20% 10% round 10%);
}

（2）円（）

circle()この関数は、円を定義するために使用されます。

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

<shape-radius>このパラメータは、円の半径を指定するために使用されます。半径は、2つのキーワードを使用して指定することができますclosest-sideとfurthest-side。

<position>このパラメーターは、円の中心を指定するために使用されます。デフォルトは正確な中心です。

パラメータが指定されていない場合はyesclosest-sideであり、正確な中心がデフォルトになります。

以下は、circle（）を書く正しい方法です。

circle(); 
/* 使用默认值：圆形使用closest-side作为半径，圆形位于元素的中心 */
 
circle(100px at 30% 50%); 
/* 圆形的半径为100像素，位于元素的水平30%，垂直50%的位置 */
 
circle(farthest-side at 25% 25%); 
/* 圆形的半径为最远边的一半，位于元素的水平25%，垂直25%的地方 */
 
circle(10em at 500px 300px);

といった：

.txtBox_content{
    clip-path: circle();
}

（3）楕円（）

ellipse()この関数は、楕円を定義するために使用されます。

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

そのパラメータはcircle（）関数と同じです。

<shape-radius>このパラメーターは、楕円の半径を指定するために使用されます。楕円のX軸半径とY軸半径をそれぞれ表すrxとryの2つの半径値を指定できます。

以下は、ellipse（）の正しい記述方法です。

ellipse() 
/* 使用默认值 */
 
ellipse(100px 50px at 30% 50%) 
/* 椭圆形的X轴半径100像素，Y轴半径50像素。圆心位于水平30%，垂直50%的地方 */
 
ellipse(farthest-side closest-side at 25% 25%) 
/* 椭圆形的X轴半径为farthest-side，Y轴半径为closest-side。圆心位于水平25%，垂直25%的地方 */
 
ellipse(10em 10em at 500px 300px) 
/* 椭圆形的X轴半径和Y轴半径都为10em。圆心位于水平500像素，垂直300像素的地方 */

といった：

.txtBox_content{
    clip-path: ellipse(50% 20%);
}

（4）ポリゴン（）

polygon()この関数は、ポリゴンを定義するために使用されます。

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
/* 其中.. */
<shape-arg> = <length> | <percentage>

polygon()のパラメータは座標ペア（<shape-arg> <shape-arg>）のセットであり、各座標ペアはポリゴンの頂点座標を表します。ブラウザは最後の頂点と最初の頂点を接続して、閉じたポリゴンを取得します。座標ペアはコンマで区切られ、絶対単位またはパーセンテージ単位の値を使用できます。

座標ペアパラメータに加えて、polygon()関数はオプションのキーワードを使用することもできますfill-rule。このキーワードは、交差する可能性のある多角形の領域を処理する方法を指定します。可能な値は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(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px )

といった：

.txtBox_content{
    clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
}

2.シェイプアプリケーション：クリップパス

クリップパス、クリッピング属性。要素をクリップするためのクリッピングパスとして、形状値、インラインまたは外部SVGパスを指定するために使用されます。

トリミングされた領域のコンテンツは表示されますが、この領域にないコンテンツは表示されません。

トリミングされた要素は、任意のコンテナおよび画像要素にすることができます。

/* SVG中的clipPath的使用 */ 
.element { 
    clip-path: url(#svgClipPathID); 
} 
/* 使用CSS中的基本图形函数 */ 
.element { 
    clip-path: polygon(...); 
}
/* 或者其他的图形函数 */

clip-pathケース前面を見るための基本的な使用形状。

これはSVGの使用法を説明するための例です。

<svg height="0" width="0">
    <defs>
        <clipPath id="svgTextPath">
            <text x="0" y="300" textLength="600px" lengthAdjust="spacing" font-family="Vollkorn" font-size="100px" font-weight="700" font-style="italic">
                White Mouse
            </text>
        </clipPath>
    </defs>
</svg>

.txtBox_content{
    clip-path: url(#svgTextPath);
}

3.形状の適用：形状-外側

shape-outsideは、形状値を使用して、浮動要素の浮動領域を定義します。このフローティング領域は、ラインのコンテンツ（フローティング要素）の形状を決定します。これにより、インラインコンテンツは、長方形を囲むのではなく、シェイプをラップします。

非フローティング要素は使用できません。

可能な値：

/* 关键字值 */
shape-outside: none;   /* 默认 */
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 形状值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> 值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

2つの古典的なアプリケーション1：テキストサークルサラウンド

場合によっては、画像をテキストで折り返す必要があります。

これは一般的なグラフィック組版技法です。フローティングは、この効果を実現するためにCSSで一般的に使用されます。

<div class="box">
    <div class="img">
        <img src="images/4.jpg" width="300" height="300" alt="">
    </div>
    <div class="txt">
        <p>
            小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
        </p>
        <p>
            “小说”出自《庄子·外物》。
        </p>
        <p>
            人物、情节、环境是小说的三要素。情节一般包括开端、发展、....
        </p>
        <p>
            “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」....
        </p>
    </div>
    <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}

.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}
.box{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    background: #f2f2f2;
}
.img{
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.txt{
    font-size: 16px;
    line-height: 2;
}

画像部分をフロートさせて、テキストの折り返しを実現します。

.img{
    float: left;
    margin:30px;
}

しかし、画像部分を円に変えると、テキストはまだ「長方形」を囲んでいます。

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
}

「円形」の折り返しを実現するには、 CSS3の外部にある新しいプロパティshapeを使用する必要があります。これは、テキストの折り返しの形状を指定します。

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
    shape-outside:circle();  /* 圆形环绕 */
}

3.クラシックアプリケーション2：任意の形状でサラウンド

同様に、任意の形状のテキスト折り返し効果を作成できます。

<div class="txtBox">
    <div class="img">
        <img src="images/fashion.jpg" alt="">
    </div>
    <div class="txt">
        <p>
            耀眼的金属光泽，独具匠心的外观设计，令宝诗龙的每一处都散发着不拘一格的时尚气息。
        </p>
        <p>
            个性十足的林彦俊也对宝诗龙的饰品青眼有加，在七夕时分亲自演绎了宝诗龙的不凡魅力。

        </p>
        <p>
            毫无疑问的，当它的光芒闪耀于脖颈和指间，你便是人群中当仁不让的视觉焦点。
        </p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
    </div>
   <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}

.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}

.txtBox{
    margin-top: 50px;
}


.txtBox{
    width: 1000px;
    height: 687px;
    background: #bda895;
    margin-right: auto;
    margin-left: auto;
}
.img{
    float: left;
    shape-outside: polygon(0 0,368px 0, 425px 226px, 463px 227px ,475px 355px,
    558px  503px ,391px  596px,  440px 687px, 0  687px);
}
.txt{
    color: #fff;
    font-size: 20px;
    line-height: 2;
    padding-top: 30px;
    padding-right: 30px;
}