1、圓形

示例:　　　　　　　　　
思路：給任何正方形元素設(shè)置一個(gè)足夠大的 border-radius ，就可以把它變成一個(gè)圓形.代碼如下：

html:

css:

 2、自適應(yīng)橢圓

思路：border-radius 這個(gè)屬性還有另外一個(gè)鮮為人知的真相，它不僅可以接受長(zhǎng)度值，還可以接受百分比值。這個(gè)百分比值會(huì)基于元素的尺寸進(jìn)行解析.這意味著相同的百分比可能會(huì)計(jì)算出不同的水平和垂直半徑。

代碼如下：

html:

css:

我們甚至可以為所有四個(gè)角提供完全不同的水平和垂直半徑，方法是在斜杠前指定 1~4 個(gè)值，在斜杠后指定另外 1~4 個(gè)值。舉例來(lái)說(shuō)，當(dāng) border-radius 的值為10px / 5px 20px 時(shí)，其效果相當(dāng)于 10px 10px 10px 10px / 5px 20px 5px 20px 。

為 border-radius 屬性分別指定4、3、2、1 個(gè)由空格分隔的值時(shí)，這些值是以這樣的規(guī)律分配到四個(gè)角上的（請(qǐng)注意，對(duì)橢圓半徑來(lái)說(shuō)，斜杠前和斜杠后最多可以各有四個(gè)參數(shù)，這兩組值是以同樣的方法分配到各個(gè)角的）

代碼如下：自適應(yīng)的半橢圓:沿橫軸劈開的半橢圓

html:

css:

4、自適應(yīng)的半橢圓:沿縱軸劈開的半橢圓

思路：自適應(yīng)的半橢圓:沿縱軸劈開的半橢圓

代碼如下：
html:

css:

5、四分之一橢圓

思路：其中一個(gè)角的水平和垂直半徑值都需要是100%，而其他三個(gè)角都不能設(shè)為圓角。

代碼如下：
html:

css:

 6、用橢圓繪制opera瀏覽器的logo

思路：繪制opera瀏覽器的logo,分析起來(lái)不難，就只有兩個(gè)圖層，一個(gè)是最底部的橢圓，一個(gè)是最上面那層的橢圓。先確定一下最底層的橢圓寬高，量了一下，水平寬度為258px，垂直高度為275px，因?yàn)槠涫且粋€(gè)對(duì)稱的橢圓，沒(méi)有傾斜度，故4個(gè)角均為水平半徑為258px，垂直半徑為275px的4個(gè)相等橢圓，用同樣的辦法確定最里面的橢圓的半徑，因此，四個(gè)角均為水平半徑120px，垂直半徑為229px的橢圓，代碼如下：

html:

css:

 7、平行四邊形

思路：偽元素方案:是把所有樣式（背景、邊框等）應(yīng)用到偽元素上，然后再對(duì) 偽元素進(jìn)行變形。因?yàn)槲覀兊膬?nèi)容并不是包含在偽元素里的，所以內(nèi)容并不會(huì)受到變形的影響。代碼如下：

html:

css:

技巧總結(jié)：這個(gè)技巧不僅對(duì) skew() 變形來(lái)說(shuō)很有用，還適用于其他任何變形樣式，當(dāng)我們想變形一個(gè)元素而不想變形它的內(nèi)容時(shí)就可以用到它。

8、菱形

思路：我們把這個(gè)技巧針對(duì) rotate() 變形樣式稍稍調(diào)整一下，再用到一個(gè)正方形元素上，就可以很容易地得到一個(gè)菱形。代碼如下：

html:

css:

技巧總結(jié)：這個(gè)技巧的關(guān)鍵在于，我們利用偽元素以及定位屬性產(chǎn)生了一個(gè)方塊， 然后對(duì)偽元素設(shè)置樣式，并將其放置在其宿主元素的下層。這種思路同樣可 以運(yùn)用在其他場(chǎng)景中，從而得到各種各樣的效果。

9、菱形圖片

思路：基于變形的方案，
我們想讓圖片的寬度與容器的對(duì)角線相等，而不是與邊長(zhǎng)相等。需要用到勾股定理，這個(gè)定理告訴我們，一個(gè)正方形的對(duì)角線長(zhǎng)度等于它的邊長(zhǎng)乘以根號(hào)2，約等于1.414 213 562  。因此，把 max-width 的值設(shè)置為根號(hào)2乘以100%約等于 414.421 356 2% 是很合理的，或者把這個(gè)值向上取整為 142% ，因?yàn)槲覀儾幌Ｍ驗(yàn)橛?jì)算的舍入問(wèn)題導(dǎo)致圖片在實(shí)際顯示時(shí)稍小（但稍大是沒(méi)問(wèn)題的，反正我們都是在裁切圖片嘛）

代碼如下：
html:

css:

技巧總結(jié)：我們希望圖片的尺寸屬性保留 100% 這個(gè)值，這樣當(dāng)瀏覽器不支持變 形樣式時(shí)仍然可以得到一個(gè)合理的布局。 „ 通過(guò) scale() 變形樣式來(lái)縮放圖片時(shí)，是以它的中心點(diǎn)進(jìn)行縮放的 （除非我們額外指定了 transform-origin 樣式） 。通過(guò) width 屬性 來(lái)放大圖片時(shí)，只會(huì)以它的左上角為原點(diǎn)進(jìn)行縮放，從而迫使我們 動(dòng)用額外的負(fù)外邊距來(lái)把圖片的位置調(diào)整回來(lái).

10、切角效果

思路：基于background:linear-gradient()的方案:把四個(gè)角都做出切角效果了。你需要四層漸變圖案，代碼如 下所示：

html:

css:

11、弧形切角

思路：上述漸變技巧還有一個(gè)變種，可以用來(lái)創(chuàng)建弧形切角（很多人也把這種 效果稱為“內(nèi)凹圓角” ，因?yàn)樗雌饋?lái)就像是圓角的反向版本） 。唯一的區(qū)別 在于，我們會(huì)用徑向漸變來(lái)替代上述線性漸變，代碼如下：

html:

css:

 12、簡(jiǎn)單的餅圖

思路：基于 transform 的解決方案：我們現(xiàn)在可以通過(guò)一個(gè) rotate() 變形屬性來(lái)讓這個(gè)偽元素轉(zhuǎn)起來(lái)。 如果我們要顯示出 20% 的比率，我們可以指定旋轉(zhuǎn)的值為 72deg （0.2 × 360 = 72） ，寫成 .2turn 會(huì)更加直觀一些。你還可以看到其 他一些旋轉(zhuǎn)值的情況。

代碼如下：
html:

css：

提示：在參數(shù)中規(guī)定角度。turn是圈，1turn = 360deg；另外還有弧度rad，2nrad = 1turn = 360deg。如，transform:rotate(2turn); //旋轉(zhuǎn)兩圈

此方法顯示 0 到 50% 的比率時(shí)運(yùn)作良好，但如果我們嘗試顯示 60% 的比率時(shí)（比如指定旋轉(zhuǎn)值為 .6turn 時(shí)），會(huì)出現(xiàn)問(wèn)題。解決方法：使 用上述技巧的一個(gè)反向版本來(lái)實(shí)現(xiàn)這個(gè)范圍內(nèi)的比率：設(shè)置一個(gè)棕色的偽 元素，讓它在 0 至 .5turn 的范圍內(nèi)旋轉(zhuǎn)。因此，要得到一個(gè) 60% 比率的餅 圖，

偽元素的代碼可能是這樣的：
html:

css:

用 CSS 動(dòng)畫來(lái)實(shí)現(xiàn)一個(gè)餅圖從 0 變化到 100% 的動(dòng)畫，從而得到一個(gè)炫酷的進(jìn)度指示器：

代碼如下：
html:

css:

總結(jié)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)Css3能有所幫助。