環繞距離控制：
<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css"> p{ border:2px solid #ddd; padding:10px; overflow:hidden; } span.shape{ width:200px; height:200px; border:2px solid red; padding:5px; margin:5px; display:block; float:left; /*環繞距離控制：*/ shape-outside:content-box; shape-outside:padding-box; shape-outside:border-box; shape-outside:margin-box; } </style> </head> <body> <p> <span class="shape"></span> HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一，HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發， HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的資訊，HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發程序中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的， </p> </body> </html>
浮動顯示區域形狀定制：
<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css"> p{ border:2px solid #ddd; padding:10px; overflow:hidden; } span.shape{ width:100px; height:100px; background:pink; margin:5px; display:block; float:left; shape-outside:margin-box; /*圓形，at后面設定圓心*/ clip-path:circle(50%); clip-path:circle(50% at 100% 0); clip-path:circle(50% at 100% 100%); /*橢圓*/ clip-path:ellipse(30% 50%); /*多邊形*/ clip-path:polygon(50% 0,100% 100%,0 100%); clip-path:polygon(50% 0,100% 50%,100% 100%,0 100%,0 50%); } </style> </head> <body> <p> <span class="shape"></span> HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一，HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發， HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的資訊，HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發程序中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的， </p> </body> </html>
使用浮動控制文本內容環繞排版：
<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css"> p{ border:2px solid #ddd; padding:10px; overflow:hidden; } span.shape{ width:100px; height:100px; background:pink; margin:5px; display:block; float:left; /*將shape-outside的值，設定成跟clip-path一致*/ shape-outside:polygon(0 0,100% 100%,0 100%); clip-path:polygon(0 0,100% 100%,0 100%); shape-outside:circle(); clip-path:circle(); shape-outside:ellipse(30% 70%); clip-path:ellipse(30% 70%); } </style> </head> <body> <p> <span class="shape"></span> HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一，HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發， HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的資訊，HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發程序中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的， </p> </body> </html>
圍繞圖片的文本繞排：
<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css"> p{ border:2px solid #ddd; padding:10px; overflow:hidden; } img{ width:100px; height:100px; margin:5px; display:block; float:left; /*將shape-outside的值，設定成跟url一致*/ shape-outside:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=https://www.cnblogs.com/chenyingying0/p/http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg); } </style> </head> <body> <p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=https://www.cnblogs.com/chenyingying0/p/http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg"> HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一，HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發， HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的資訊，HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發程序中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的， </p> </body> </html>
注意：只有對于png格式的圖片才會有效果！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/206669.html
標籤：Html/Css
上一篇：歸納一些比較好用的函式