形狀
一 自適應的橢圓
1.難題
1> 圓
你可能注意到過， 給任何正方形元素設定乙個足夠大的border-radius，
就可以把它變成乙個圓形。所用到的css **如下所示：
1#bd
*當任意兩個相鄰圓角的半徑之和超過border box 的尺寸時，使用者
**必須按比例減小各個邊框半徑所使用的值，直到它們不會相互重疊
為止2> 橢圓
如果它的寬高相等，就顯示為乙個圓；如果寬
高不等，就顯示為乙個橢圓
2.解決方案
說到border-radius，有乙個鮮為人知的真相：它可以單獨指定水平
和垂直半徑，只要用乙個斜槓（/）分隔這兩個值即可。這個特性允許我
們在拐角處建立橢圓圓角
因此，如果我們有乙個尺寸為
200px × 150px 的元素，就可以把它圓角的兩個半徑值分別指定為元素寬高的
一半，從而得到乙個精確的橢圓：
#bd
但是，這段**存在乙個很大的缺陷：只要元素的尺寸發生變化，
border-radius 的值就得跟著改。我們在圖3-5 中可以看到，當元素的尺寸
變為200px×300px 時，如果border-radius 沒有跟著改變，會發生什麼後
果。因此，如果我們的元素尺寸會隨著它的內容變化而變化，這就是乙個問
題了。它不僅可以接受長度值，還可以接受百分比值
這個百分比值會基於元素的尺寸進行解析，即寬度用於水平半徑的解析，而高度
用於垂直半徑的解析。這意味著相同的百分比可能會計算出不同的水平和垂
直半徑。
#bd
3.半橢圓
我們甚至可以為所有四個角提供完全不同的水平和垂
直半徑，方法是在斜槓前指定1~4 個值，在斜槓後指定另外1~4 個值。請注
意這兩組值是單獨展開為四個值的。舉例來說，當border-radius 的值為
10px / 5px 20px 時，其效果相當於10px 10px 10px 10px / 5px 20px
5px 20px。
#bd
半橢圓是可以變成半圓的，只要它的寬度剛好伸展到高度的兩倍（或者對乙個沿縱軸劈開的
橢圓來說，是高度伸展為寬度的兩倍
4.四分之一橢圓
要建立乙個四分之一橢圓，其中乙個角的水平和垂直半徑值都需要是
100%，而其他三個角都不能設為圓角。
#bd
二 平行四邊形
1.難題
使用skew()來進行斜向拉伸實現 平行四邊形
乙個引數時：表示水平方向的傾斜角度
兩個引數時：第乙個引數表示水平方向的傾斜角度，第二個引數表示垂直方向的傾斜角度
#box
但是，這導致它的內容也發生了斜向變形，這很不好看，而且難讀。
有沒有辦法只讓容器的形狀傾斜，而保持其內容不變呢？
2.且套元素方案
我們可以對內容再應用一次反向的skew() 變形，從而抵消容器的變形
效果，最終產生我們所期望的結果。
<a href
="#yolo"
class
="button"
>
<
div>click me
div>
a>
<
style
>
.button
.button > div
style
>
3.偽元素方案
另一種思路是把所有樣式（背景、邊框等）應用到偽元素上，然後再對
偽元素進行變形。因為我們的內容並不是包含在偽元素裡的，所以內容並不
會受到變形的影響。下面來看看這個技巧能否得到與前面相同的鏈結樣式。
此時，用偽元素生成的方塊是重疊在內容之上 可以給偽元素設定z-index: -1 樣式
.button .button::before
三 稜形
1.難題
使用rotate()
以上產生乙個 八角形 的 並沒有產生稜形
可以使用scale()解決：
.picture .picture > img
3.裁切路徑方案
上面的方法確實可以奏效，但它基本上是乙個hack。這個方法需要一層
額外的html 標籤，這不夠簡潔；**本身也不夠直觀；它甚至還不夠健
壯——如果我們碰巧要處理一張非正方形的，這個小把戲就會原形畢露
事實上，我們還有乙個更好的辦法來完成這個任務。它的主要思路是
使用clip-path 屬性。
裁切路徑允許我們把元素裁剪為我們想要的任何形狀。在這個例子
中，我們將會使用polygon()（多邊形）函式來指定乙個菱形。實際上，它
允許我們用一系列（以逗號分隔的）座標點來指定任意的多邊形。我們甚至
可以使用百分比值，它們會解析為元素自身的尺寸。**如下所示：
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
四 切角效果
1.難題
2.解決方案
1> 利用漸變
右下角:
#box
四角：
#box
3.弧形切角
可以用來建立弧形切角（很多人也把這種
效果稱為「內凹圓角」，因為它看起來就像是圓角的反向版本）。唯一的區別
在於，我們會用徑向漸變來替代上述線性漸變：
#box
五 梯形標籤頁
1.難點
一直以來，梯形
都是眾所周知難以用css 生成的形狀，
2.解決方案
transform: perspective(.5em) rotatex(5deg);
整個元素應用3d 變形的，因此它上面的文字也變形了。對元素使用了3d
變形之後，其內部的變形效應是「不可逆轉」的，這一點跟2d 變形不同
（在2d 變形的體系之下，內部的逆向變形可以抵消外部的變形效應）
唯一可行的途徑就是把變形效果作用在偽元
素上。
.tab .tab::before
自學筆記 03 CSS
內部樣式表 使用style標記建立樣式時，最好寫在 外部樣式表 標籤匯入外部樣式表 stylesheet type text css href 目標檔案的路徑及檔名全稱 import匯入外部樣式表 link和import匯入外部樣式區別 內聯樣式表 行內樣式 嵌入式樣式 行內樣式表 標籤 style...
CSS基礎03 CSS字型屬性
css fonts 字型 屬性用於定義字型系列 大小 粗細 文字樣式 如斜體等 css使用font family屬性定義文字的字型系列。pstyle css使用 font size屬性設定字型大小 pstyle css使用 font weight屬性來設定字型粗細，屬性值有normal 正常字型，相...
前端基礎 03 CSS屬性
1.瀏覽量預設的字型微軟雅黑 font family adobe arabic 2.字型大小設定 1.px 預設畫素 2.rem 對應瀏覽器預設的字型大小，瀏覽器是1rem 16px google瀏覽器是 16px,最小是12px 3.em 等於父級的字型尺寸 相對父級字型大小而言 4.相對父級的字...