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

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

10多年的井陘網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整井陘建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“井陘網(wǎng)站設計”,“井陘網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

聲明圖形

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

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

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

如果屬性被設置為圖片鏈接， 瀏覽器會按照圖片的“alpha通道”來繪制圖形形狀。

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

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

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

設置自定義圖形的背景色

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

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

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

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

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

提醒

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

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

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

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

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

Lorem?Ipsum……

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

CSS Code復制內(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)在坐標系已經(jīng)創(chuàng)建成功，接下來我們將要繪制圖形了?？梢酝ㄟ^兩種方式來繪制圖形：

使用polygon（）

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

坐標點的單位可以是固定值，或者百分比。在這個例子中我們將以百分比的形式設置點陣位置。接下來我們需要應用這個樣式在浮動元素上。

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

。shaped{

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

shape-margin:20px;

}

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

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

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

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

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

網(wǎng)站標題：html中如何設置不規(guī)則圖形
標題URL：http://m.jiaotiyi.com/article/gjidpi.html