html中如何設(shè)置不規(guī)則圖形

這篇文章將為大家詳細(xì)講解有關(guān)html中如何設(shè)置不規(guī)則圖形，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　聲明圖形

　　我們需要使用shape-outside 屬性聲明不規(guī)則圖形。當(dāng)前， shape-outside 屬性只能被應(yīng)用于浮動(dòng)元素，并且只能應(yīng)用于塊級(jí)元素。如果需要在非塊級(jí)元素上使用這些屬性，必須先把元素聲明為塊級(jí)。

　　Shape-* 值有三種賦值方式： 自動(dòng)，基本圖形或者圖片鏈接。如果被設(shè)置為自動(dòng)，浮動(dòng)元素將繼續(xù)作為傳統(tǒng)的盒模型進(jìn)行渲染。如果你還不熟悉盒模型，請(qǐng)參考CSS盒模型，這是閱讀本篇文章的基礎(chǔ)。

　　繪制方法包括：rectangle、inset-rectangle、circle、ellipse或polygon方法等。你可以通過鏈接查看詳細(xì)的描述。

　　如果屬性被設(shè)置為圖片鏈接， 瀏覽器會(huì)按照?qǐng)D片的“alpha通道”來繪制圖形形狀。

　　在元素上創(chuàng)建坐標(biāo)系

　　聲明了CSS 圖形之后，我們首先需要?jiǎng)?chuàng)建將用于繪制圖形的坐標(biāo)系。

　　坐標(biāo)系是非常必要的，因?yàn)閳D形需要依據(jù)此坐標(biāo)系上的點(diǎn)陣進(jìn)行繪制。shape-* 屬性是基于盒模型的，為了使它啟作用，需要明確指定盒子的大小，限制不規(guī)則圖形在盒子范圍內(nèi)，它也將被用于創(chuàng)建繪制坐標(biāo)系，坐標(biāo)系的起點(diǎn)位于形盒子左上角。如果沒有明確寬和高聲明， shape-* 屬性將不啟作用。

　　設(shè)置自定義圖形的背景色

　　應(yīng)用了自定義圖形，它的盒模型仍然存在，其它傳統(tǒng)的樣式設(shè)置將作用于盒模型范圍。例如，下面這個(gè)例子中，

　　我們僅僅想創(chuàng)建一個(gè)浮動(dòng)圓形，并設(shè)置這個(gè)圓形的背景色。按照正常的思路理解，效果應(yīng)該是這樣的：

　　但是當(dāng)設(shè)置了盒子的背景色后，你會(huì)發(fā)現(xiàn)和預(yù)期的效果不同，效果如下：

　　在上圖中我們看到背景色被應(yīng)用到盒模型范圍，而不是我們預(yù)想的圓形內(nèi)。

　　那么，我們應(yīng)該怎樣設(shè)置圓形的背景色呢？這就引出了一個(gè)新的CSS樣式： clip-path 。clip-path 用于限制當(dāng)前樣式的作用范圍。在下面的例子中你將看到它的使用方法。

　　提醒

　　現(xiàn)在，shape-outside 屬性只作用域浮動(dòng)的元素，并且僅限制于在塊級(jí)元素上應(yīng)用。使用這些屬性定義的元素，其周圍的文本將依賴于圖形形狀排布。未來的CSS 形狀將不僅僅限制與應(yīng)用于浮動(dòng)元素上，我們將不僅僅可以在文本外部的圖形上做文章，完全可以在其內(nèi)部定義自定義圖形，實(shí)現(xiàn)如下效果：

　　實(shí)例-使用shape-outside 創(chuàng)建環(huán)繞于自定義形狀的浮動(dòng)文本

　　我們從一個(gè)簡(jiǎn)單的例子開始。在實(shí)例中我們將創(chuàng)建一個(gè)自定義圖形，并且內(nèi)置文本流，最終效果圖如下（文章末尾提供實(shí)例下載鏈接）：

　　例子中我們擁有兩個(gè)容器，用于設(shè)置自定義形狀和嵌套文本內(nèi)容。代碼如下：

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　Lorem?Ipsum……

　　首先我們需要聲明浮動(dòng)區(qū)域的DIV節(jié)點(diǎn)，并且使用固定值設(shè)置大小。代碼如下：

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　。container{

　　overflow:hidden;

　　height:?100vh;

　　width:?100vw;

　　}

　　。shaped{

　　float:left;

　　height:100vh;

　　width:40vw;

　　float:rightright;

　　background:blackurl（

　　background-size:cover;

　　}

　　現(xiàn)在坐標(biāo)系已經(jīng)創(chuàng)建成功，接下來我們將要繪制圖形了。可以通過兩種方式來繪制圖形：

　　使用polygon（）

　　我們可以使用polygon（） 方法來計(jì)算圖形范圍。這個(gè)方法從坐標(biāo)系中獲取多個(gè)點(diǎn)用于繪制圖形，每個(gè)點(diǎn)由（x, y）值定位。 例子中我們將要?jiǎng)?chuàng)建一個(gè)非常簡(jiǎn)單的多邊形，如下圖所示：

　　坐標(biāo)點(diǎn)的單位可以是固定值，或者百分比。在這個(gè)例子中我們將以百分比的形式設(shè)置點(diǎn)陣位置。接下來我們需要應(yīng)用這個(gè)樣式在浮動(dòng)元素上。

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　。shaped{

　　shape-outside:?polygon（0?0,?100%?0,?100%?100%,30%?100%）;

　　shape-margin:20px;

　　}

　　應(yīng)用以上的樣式后，一個(gè)不規(guī)則的圖形-梯形產(chǎn)生了。

　　可以看到代碼中使用了shape-margin 屬性，它用于設(shè)置圖形和文本內(nèi)容之間的邊距。

　　接下來需要添加背景圖，需要注意在添加背景圖之后，它將被應(yīng)用于盒模型，目前為止效果如下：

　　所以，為了達(dá)到預(yù)期效果，我們需要設(shè)置clip-path 屬性，并且設(shè)置其范圍和shape-outside 屬性相同。

關(guān)于“html中如何設(shè)置不規(guī)則圖形”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。