編輯中，僅請見諒 m(_ _)m

也是前陣子看到這個效果，覺得真的超棒的~!!
https://www.w3.org/TR/css-shapes/
( 但如果形狀很複雜的話，其實要自己寫有點麻煩，還是需要 UI 好夥伴的支援。 )

一般在網頁上放的 jpg / png / gif 都是方方的，看起來就比較死板；
但設定了 CSS Shapes 後就可以讓改變圖片的形狀，跟文字的排版能靈活一點了。

像是番茄就可以圓圓的

來源：http://labs.jensimmons.com/examples/shapes-1.html

支援度也不錯

來源：http://labs.jensimmons.com/examples/images/blackberry.png

而且就算不支援，也只是恢復成方方的形狀而已，並不會有太大的狀況。

主要有三個相關的屬性：shape-outside、shape-image-threshold、shape-margin

shape-outside

預設： none
允許的值： none / 盒模型範圍 / 基本形狀 / 參考圖片

盒模型範圍

margin-box / border-box / padding-box / content-box
概念跟 background-clip 差不多

基本形狀

1. inset
2. circle
3. ellipse
4. polygon

參考圖片

1. url
2. attr

shape-image-threshold*

預設： 0
允許的值： 0 到 1 之間的值

如果 shape-outside 設定的是參考某張圖的話，可以使用這個值，告訴瀏覽器應該要取多少透明度以上的像素點。

拿 黑莓的 shape 範例 來微調一下後
https://jsfiddle.net/lazy_shyu/k7fuq79c/
調整的部分有：

1. 改拿黑莓本身的圖來當 shape-outside 的參考
2. 不預設 shape-image-threshold ( 所以就是 0 了 )
3. hover 圖片時，shape-image-threshold 設為 0.9
   

shape-margin

預設： 0
允許的值： 長度 / 百分比

跟一般的 margin 類似，但只接受一個值，是從本體的形狀往外算的留白空間。

拿 剛剛的葡萄 shape 範例 來稍微改一下，就可以看到效果了。

沒有設定 shape-margin 的狀況	設定了 shape-margin: 5px 的狀況

|
右邊的圖中可以看出，文字跟紫色部分的距離增加了~
( 紫色部分是用 shape-outside 設定的本體 )