當css3推出border-radius屬性時我們是那麼欣喜若狂啊，一想到終於不用再新增額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然後又發現border-top-left/right-radius的水平半徑之和大於元素寬度時，實際值會按比例分配元素寬度時，不禁會問"我真的懂border嗎？"。本系列將稍微深入**一下那個貌似沒什麼好玩的border！
《css魔法堂：重拾border之——解構border》
《css魔法堂：重拾border之——不僅僅是圓角》
《css魔法堂：重拾border之——更廣闊的遐想》
也許大家會覺得通過滑動門已經能實現尺寸有限下的容器圓角效果，而css3中的border-image更能完美實現容器尺寸無下限的圓角效果，那為什麼還要引入border-radius呢？**十分簡單啦，無論是滑動門還是border-image技術，它們均以作為圓角的基礎，而border-radius則是通過數學中的幾何圖形來畫圓角。也就是說我們操作的幾何公式中的未知變數，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設計師幫忙。因此通過border-radius再結合其他與未知變數相關的屬性，變化可真是無窮無盡哦！
border-corner-shape作為即將引入的特性，為我們提供更多形狀的角的可能。具體可參考border-corner-shape
border-corner-shape: curve | bevel | notch | scoop
curve:預設值，圓角
bevel:切角，其實就是沿與相交線的垂直線切割掉直角
notch:凹槽
scoop:向內凹的圓角
《the humble border-radius》
重拾CSS 學習之旅
1 什麼是css css叫做層疊樣式表，它定義了如何顯示html元素。樣式通常儲存在樣式表中，引用css外部式是為了解決表現與資料分離的問題，外部樣式也可以極大的提高工作效率。儲存在css檔案中，多個央視定義可層疊為乙個 2 語法 css例項主要由兩部分組成，選擇器以及一條或多條宣告 h1h1部分屬...
CSS魔法堂 Position定位詳解
一 position各屬性值詳解 1.static 預設值，元素將按照正常文件流規則排列。2.relative 相對定位，元素仍然處於正常文件流當中，但可以通過left top right和bottom的css規則來改變元素的位置。注意點 a 元素原來位置將保留，不被其他元素所佔據 b 當使用lef...
CSS魔法堂 Position定位詳解
一 position各屬性值詳解 1.static 預設值，元素將按照正常文件流規則排列。2.relative 相對定位，元素仍然處於正常文件流當中，但可以通過left top right和bottom的css規則來改變元素的位置。注意點 a 元素原來位置將保留，不被其他元素所佔據 b 當使用lef...