IT工程師數位筆記本

前言

 當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比例分配元素寬度時，不禁會問"我真的懂border嗎？"。本系列將稍微深入探討一下那個貌似沒什么好玩的border！
《CSS魔法堂：重拾Border之——解構Border》
《CSS魔法堂：重拾Border之——圖片作邊框》
《CSS魔法堂：重拾Border之——不僅僅是圓角》
《CSS魔法堂：重拾Border之——更廣闊的遐想》

當Border-Radius遇上Mr. X

 也許大家會覺得通過滑動門已經能實現尺寸有限下的容器圓角效果，而CSS3中的Border-Image更能完美實現容器尺寸無下限的圓角效果，那為什么還要引入Border-Radius呢？代理十分簡單啦，無論是滑動門還是Border-Image技術，它們均以圖片作為圓角的基礎，而Border-Radius則是通過數學中的幾何圖形來畫圓角。也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設計師幫忙。因此通過Border-Radius再結合其他與未知變量相關的屬性，變化可真是無窮無盡哦！

當Border-Radius遇上border-style

<style type="text/css">
.target{
  width: 0;
  height: 0;
  border: 60px double #F00;
  border-radius: 50%;
}
</style>
<div class="target"></div>

當Border-Radius遇上Transition

更多變化的角byborder-corner-shape

 border-corner-shape作為即將引入的特性，為我們提供更多形狀的角的可能。具體可參考border-corner-shape
border-corner-shape: curve | bevel | notch | scoop
curve:默認值，圓角
bevel:切角，其實就是沿與相交線的垂直線切割掉直角
notch:凹槽
scoop:向內凹的圓角

總結

 尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5465268.html^_^肥仔John

感謝

《The Humble Border-Radius》