技巧：利用border-radius屬性產生圓，橢圓等形狀border-radius按照順序依次設定border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
沒有繼承性，適用於css動畫。border-radius可以單獨指定水平半徑和垂直半徑，中間用乙個斜槓/分隔。
當任意兩個相鄰圓角的半徑之和超過border-box的尺寸時，使用者**必須按照比例減小各個邊框半徑所使用的值，直到它們不會互相重疊。border-radius不僅可以接受長度值，還可以接受百分比值。這個百分比是基於元素的尺寸進行解析的，垂直半徑的百分比是相對元素的高度進行解析，水平半徑的百分比是相對於元素的寬度進行解析。
本質理解：border-radius是對元素的border-box進行切圓角處理，邊框外側的拐角作為切圓角的基準，邊框內側的圓角會稍微小一些。嚴格來說是max(0, [border-radius]-[border-width])常規圖形
1.朝上的半橢圓
border-radius: 50% / 100% 100% 0 0;當某乙個方向的半徑為0時，另外乙個方向的半徑可以是任意值。
2. 朝左的半橢圓
border-radius: 100% / 50% 0 0 50%;3. 四分之一的橢圓
border-radius: 100% 0 0 0;作品欣賞
展示了各種奇妙的形狀
play.csssecrets.io/quarter-ellipse
play.csssecrets.io/half-ellipse
play.csssecrets.io/ellipse
CSS 自適應布局
說明 左列固定右列自適應，也可以為右列固定左列自適應，常見於中臺管理介面 移動端web的列表展示等等。固定寬度 自適應 說明 左邊的固定列設定為 float left，右邊的自適應列設定為 float none。css container left right 說明 自適應列的width根據calc...
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...
CSS 寬度自適應總結
前些日談到布局，學長說，你給我寫個 一邊固定寬度一邊自適應 我當時有點矇圈，回去查了些資料現在總結了一下。1.問題 什麼叫做自適應？有兩種情形，其實這兩種還蠻不同的。放在一起來總結吧。情形一 寬度自適應，一列定寬，一列自適應，隨視窗大小改變而無滾動條出現。情形二 高度自適應，建立高度相等的列。這篇文...