CSS高級特效（上）

1.CSS Shapes

CSS Shapes是一個新標準，旨在讓Web設計者能使用各類形狀。
CSS Shapes包含兩組新屬性，一組用於設置影響盒子中內容的形狀，另外一組用於設置影響形狀元素周邊內容流的形狀。

shape-outside屬性只能應用給浮動元素。這個屬性不改變元素自身的外觀，只會經過設置形狀影響其外部內容流。
shape-outside屬性的值是形狀函數，好比circle()、ellipse()、polygon()、inset()。形狀函數能夠傳入參數，不傳參數則使用默認值。

.fig-moon {
    float: right;
    max-width: 40%;
    shape-outside: circle();
}

基於複雜的圖片建立多邊形會很是麻煩。好在咱們能夠直接在圖片的源文件上基於透明度來建立形狀。
默認狀況下，形狀輪廓會沿圖片徹底透明區域的邊緣生成，但這個值能夠經過shape-image-threshold屬性來修改，默認值是0.0（徹底透明）。

.fig-planet {
    float: right;
    max-width: 65%;
    shape-outside: url(../img/saturn.png);
    /*shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%, 21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);*/
    shape-image-threshold: 0.9;
}

使用border-radius來建立圓形：

.fig-moon {
    float: right;
    max-width: 40%;
    border-radius: 50%;
    shape-outside: border-box;
}

.fig-moon {
    float: right;
    max-width: 40%;
    border-radius: 50%;
    shape-outside: margin-box;
    margin: 2em;
}

.fig-planet {
    float: right;
    max-width: 65%;
    shape-outside: url(../img/saturn.png);
    shape-margin: 1em; /* shape-margin屬性用於給整個形狀添加外邊距。 */
}

2.剪切與蒙版

剪切（clipping）使用路徑形狀定義硬邊界，能夠基於該邊界徹底切換元素的可見性。
蒙版（masking）用於將元素的某些區域設置爲更透明或更不透明。
剪切會影響對象的響應區域，而蒙版不會。

2.1 剪切

剪切最先是在經過clip屬性引入的。但這個屬性只能應用給絕對定位的元素，並且只能把這些元素剪切爲矩形。
新的clip-path屬性可使用CSS形狀中的基本形狀函數定義如何剪切元素。它還能使用SVG文檔剪切元素，只要經過URL引用一個 元素便可。
剪切路徑隻影響元素渲染後的外觀，而不會影響頁面流。

<nav class="stacked section nav-section inverted">
    <ul class="wrapper">
        <li><a href="#moon">The Moon</a></li>
        <li><a href="#sun">The Sun</a></li>
        <li><a href="#planets">Planets</a></li>
        <li><a href="#milky-way">Galaxy</a></li>
        <li><a href="#universe">Universe</a></li>
    </ul>
</nav>

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
    <clipPath id="saturnclip">
        <circle cx="50" cy="50" r="40.1" />
        <ellipse transform="" cx="" cy="" rx="" ry="" />
    </clipPath>
</svg>

.nav-section [href="#planets"] {
    /* #saturnclip表示引用圖片剪切路徑 */
    clip-path: url(img/clip.svg#saturnclip);
}

目前，只有Firefox支持在CSS引入外部剪切源並影響HTML內容。

不支持引用外部剪切源的瀏覽器其實支持SVG剪切路徑，只不過CSS、HTML和SVG都必須在一個文件中。
使用行內SVG做爲剪切路徑的方法適用於大多數現代瀏覽器。

對於複雜的形狀，建議你們仍是使用圖片編輯器來建立，而後再將最終的圖片做爲剪切路徑的源。

2.2 蒙版

<header class="page-header stacked inverted">
    <h1 class="header-title">Stargazing</h1>
</header>

/* 使用CSS漸變來建立蒙版。 */
.header-title {
    mask-image: radial-gradient(ellipse 90% 30% at 50% 50%, rgba(0,0,0,0) 45%, #000 70%);
    mask-size: 100% 200%;
}

以SVG中的<mask>元素做爲蒙版源：

.header-title {
    mask: url(#ellipseMask);
}

<svg xmlns="http://www.w3.org/2000/svg" height="0" viewBox="0 0 100 100">
    <defs>
        <!-- 省略 -->
        <mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
            <radialGradient id="radialfill" r="0.9" cy="1.1">
                <stop offset="45%" stop-color="#000"/>
                <stop offset="70%" stop-color="#fff"/>
            </radialGradient>
        </mask>
    </defs>
</svg>

參考資料：

• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米爾·比約克隆德