圖解CSS形狀Shapes

CSS的高級特效----形狀（Shapes）

CSS Shapes包含兩組屬性，shape-outside 和 shape-inside。 （但本文不涉及講shape-inside）

shape-outside 有四個形狀函數( 只能應用給浮動元素 )
：circle（） ----圓形
：ellipse（） ----橢圓形
：polygon（） ----多邊形
：inset（） ----嵌入在盒子邊界內的矩形，也可以指定圓角

circle（） 圓形與 ellipse（） 橢圓的 語法：
circle（）：接受 一個半徑一個位置值circle（r1 at x y）----如傳入如果位置傳入一個值則以元素左上角原點圓心爲x軸方向的x位置，y軸方向默認爲元素的50%
ellipse（）：接受 兩個半徑值和一個位置值ellipse（r1 r2 at x y）----位置的傳值與圓形一致

下面是html代碼

<div>
	<div><div>
	<p>此處很多文字</p>
</div>

然後是 給div添加浮動和形狀函數,下圖爲谷歌調試及對應效果

inset（） 需傳入一組長度值，分別是上，右，下，左邊的距離，很像margin和padding簡寫，此外可以通過round關鍵字指定圓角，隨後是半徑，與border-radius類似

如下例子，給div添加下面樣式

.inset{
	/*距離外部盒子的上，下各50px
	 *距離外部盒子的左，右各50px
	 *還有半徑爲20px的圓角*/
    shape-outside: inset(50px 50px round 20px);
	width: 200px;
    height: 200px;
    background-color: pink;
    float: right;
}

polygon（） 此函數相對比較複雜一些，這個函數接受一系列的座標對，用於在盒子表面指定多個點，座標相對盒子的左上角，最終把各個點連接起來就是要創建的形狀
創建多邊形最方便方式是使用CSS Shapes Editor插件,它支持Chrome和Opera。而且會在檢查形狀元素時給出預覽。也可以通過創建並拖動控制點來創建新形狀

.polygon {
	width: 200px;
    height: 200px;
    background-color: pink;
    float: right;
    shape-outside: polygon(100% 99%, 3% 90%,11% 80%,3% 70%,43% 30%); 
}

多邊形中每個點的座標以百分比表示，這樣可以保證最大的靈活度。

形狀圖片
可以直接在圖片的源文件上基於透明度來創建形狀

.url {
	width: 700px;
    height: 200px;
    float: right;
    shape-outside: url(./images/saturn.png);
}

注意: 只通過瀏覽器打開HTML文件是不行的，必須通過Web服務器取得這個頁面，這樣引用的圖片纔會帶有合適的HTTP首部信息，告訴瀏覽器該圖片與CSS來自同一個域。這種安全機制是較新的瀏覽器纔有的，是爲了防止引用的文件對你的計算機造成危害。

shape-image-threshold： 默認情況下，形狀輪廓會沿圖片完全透明區域的邊緣生成的，可以通過這個屬性修改，默認值是0.0（完全透明），最大值爲1.0，比如修改上圖的不透明度閾值（臨界值）爲0.9，則圖片中半透明部分不再被包含在形狀內

.url {
	width: 700px;
    height: 200px;
    background-color: pink;
    float: right;
    shape-outside: url(./images/saturn.png);
    shape-image-threshold: 0.9;
}

原圖圖片中半透明的部分生成形狀時被忽略了，顯示的高不透明度

盒子形狀與邊距
：border-box
除了使用形狀函數或者圖片外，還可以使用border-radius來創建圓形，但僅有圓角邊框不能生成形狀，還得通過shape-ouside屬性告訴瀏覽器，以border-box作爲生成形狀的依據。

<!-- html代碼 -->
<img src="./images/sum.jpg" alt="">
<p>此處很多文字</p>

/*img樣式*/
img {
	float: right;
	border-radius: 50%;
	shape-outside: border-box;
}

：margin-box
使用shape-outside：margin-box；給上圖的球體周圍添加邊距；

img {
	float: right;
	border-radius: 50%;
	shape-outside: margin-box;
	margin: 2em;
}

shape-margin:
如果想給形狀複雜的圖片添加外邊距，可以使用shape-margin這個屬性用於給整個形狀添加外邊距，與創建形狀的方法無關

<!-- html代碼 -->
<div class="url"></div>
<p>此處很多文字</p>

/*css樣式*/
.url {
	width: 700px;
    height: 200px;
    float: right;
    shape-outside: url(./images/saturn.png);
    shape-margin: 1em;
}