溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹CSS3中怎么繪制不規則圖形，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
聲明圖形
我們需要使用shape-outside 屬性聲明不規則圖形。當前， shape-outside 屬性只能被應用于浮動元素，并且只能應用于塊級元素。如果需要在非塊級元素上使用這些屬性，必須先把元素聲明為塊級。
Shape-* 值有三種賦值方式: 自動，基本圖形或者圖片鏈接。如果被設置為自動，浮動元素將繼續作為傳統的盒模型進行渲染。如果你還不熟悉盒模型，請參考CSS盒模型，這是閱讀本篇文章的基礎。
繪制方法包括：rectangle、inset-rectangle、circle、ellipse或polygon方法等。你可以通過鏈接查看詳細的描述。
如果屬性被設置為圖片鏈接， 瀏覽器會按照圖片的“alpha通道”來繪制圖形形狀。
在元素上創建坐標系
聲明了CSS 圖形之后，我們首先需要創建將用于繪制圖形的坐標系。
坐標系是非常必要的，因為圖形需要依據此坐標系上的點陣進行繪制。shape-* 屬性是基于盒模型的，為了使它啟作用，需要明確指定盒子的大小，限制不規則圖形在盒子范圍內，它也將被用于創建繪制坐標系，坐標系的起點位于形盒子左上角。如果沒有明確寬和高聲明， shape-* 屬性將不啟作用。
設置自定義圖形的背景色
應用了自定義圖形，它的盒模型仍然存在，其它傳統的樣式設置將作用于盒模型范圍。例如，下面這個例子中，
我們僅僅想創建一個浮動圓形，并設置這個圓形的背景色。按照正常的思路理解，效果應該是這樣的：
但是當設置了盒子的背景色后，你會發現和預期的效果不同，效果如下：
在上圖中我們看到背景色被應用到盒模型范圍，而不是我們預想的圓形內。
那么，我們應該怎樣設置圓形的背景色呢？這就引出了一個新的CSS樣式： clip-path 。clip-path 用于限制當前樣式的作用范圍。在下面的例子中你將看到它的使用方法。
提醒
現在，shape-outside 屬性只作用域浮動的元素，并且僅限制于在塊級元素上應用。使用這些屬性定義的元素，其周圍的文本將依賴于圖形形狀排布。未來的CSS 形狀將不僅僅限制與應用于浮動元素上，我們將不僅僅可以在文本外部的圖形上做文章，完全可以在其內部定義自定義圖形，實現如下效果：
實例-使用shape-outside 創建環繞于自定義形狀的浮動文本
我們從一個簡單的例子開始。在實例中我們將創建一個自定義圖形，并且內置文本流，最終效果圖如下（文章末尾提供實例下載鏈接）：
例子中我們擁有兩個容器，用于設置自定義形狀和嵌套文本內容。代碼如下：
CSS Code復制內容到剪貼板
<div class="container">
<div class="shaped"></div>
<div class="content">
<h2><span>La</span> Tour <br/>Eiffel</h2>
<p>Lorem Ipsum.....</p>
</div>
</div>
首先我們需要聲明浮動區域的DIV節點，并且使用固定值設置大小。代碼如下：
CSS Code復制內容到剪貼板
.container{
overflow:hidden;
height: 100vh;
width: 100vw;
}
.shaped{
float:left;
height:100vh;
width:40vw;
float:rightright;
background: black url（../images/eiffel.jpg） center top no-repeat;
background-size:cover;
}
現在坐標系已經創建成功，接下來我們將要繪制圖形了。可以通過兩種方式來繪制圖形：
使用polygon（）
我們可以使用polygon() 方法來計算圖形范圍。這個方法從坐標系中獲取多個點用于繪制圖形，每個點由(x, y)值定位。 例子中我們將要創建一個非常簡單的多邊形，如下圖所示：
坐標點的單位可以是固定值，或者百分比。在這個例子中我們將以百分比的形式設置點陣位置。接下來我們需要應用這個樣式在浮動元素上。
CSS Code復制內容到剪貼板
.shaped{
/*…*/
shape-outside: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
shape-margin: 20px;
}
應用以上的樣式后，一個不規則的圖形-梯形產生了。
可以看到代碼中使用了shape-margin 屬性，它用于設置圖形和文本內容之間的邊距。
接下來需要添加背景圖，需要注意在添加背景圖之后，它將被應用于盒模型，目前為止效果如下：
所以，為了達到預期效果，我們需要設置clip-path 屬性，并且設置其范圍和shape-outside 屬性相同。
CSS Code復制內容到剪貼板
.shaped{
/*…*/
clip-path: polygon（0 0, 100% 0, 100% 100%,30% 100%）;
}
現在，我們就通過polygon() 方法實現了目標效果。
使用圖片鏈接
我們也可以通過圖片（嚴格說是擁有通明區域的圖片）來創建不規則圖形，依據圖片的“alpha通道” 生成不規則圖形。
例如，替代polygon() 聲明方法。我們可以設置shape-outside 屬性值為圖片URI，瀏覽器就會自動依據圖片來繪制不規則圖形。
圖片中的透明部分將被聲明為文本元素的浮動部分。其余部分被聲明為不規則圖形。代碼如下：
CSS Code復制內容到剪貼板
.shaped{
/*…*/
shape-outside: url（/images/mm.png）;
shape-image-threshold: 0.5;這個屬性用于設置浮動區域透明度范圍
}
關于CSS3中怎么繪制不規則圖形就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
