成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS魔法堂：重拾Border之——不僅僅是圓角

_Dreams / 802人閱讀

摘要：擼代碼實現(xiàn)首頁檢驗單查詢成品通用標準審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對角線，將作為邊的相交點。

前言

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

圓角進化論

?當設(shè)計稿上出現(xiàn)圓角按鈕/標簽頁時，我們會如何應(yīng)對呢？CSS3到來之前最廣為人知的應(yīng)該就是"滑動門"(sliding door)實現(xiàn)方式了。

滑動門實現(xiàn)法
border-radius實現(xiàn)法

border-top-left-radius: [|]{1,2}
border-top-right-radius: [|]{1,2}
border-bottom-left-radius: [|]{1,2}
border-bottom-right-radius: [|]{1,2}
設(shè)置左上/右上/左下/右下角水平和垂直橢圓半徑
:以帶單位的絕對值作為半徑;
:以對應(yīng)border box的尺寸(不是border-width)為參考系，設(shè)置半徑;
注意：結(jié)果值為0(默認值)時，為直角邊框
border-radius: [|]{1,4} [/[|]{1,4}]?:一次過設(shè)置4個角的橢圓半徑

?從上圖我們可以看到4個角分別對應(yīng)4個獨立的橢圓形，而圓角正是4分之1個橢圓。
擼代碼！
圓角的何止是border box啊


?上圖的content box變成橢圓形了，而且content box中的文字好像飄到content box外面。但確實是content box變?yōu)闄E圓形還是說僅僅是背景色是如此而已呢？讓我們添加overflow:hidden看看效果吧

?看來border-radius確實影響到content box了。其實border-radius將會影響到box model中的所有box。當我們通過border-radius設(shè)置border box的橢圓半徑后，CSS渲染引擎會根據(jù)公式自動計算出margin/padding/content box的橢圓半徑，然后為它們渲染出圓角。
注意

margin/border/padding/content box中相同方向的角的橢圓的圓心重疊;

當橢圓半徑為0時，渲染為直角。

margin box圓角了

公式：margin-radius = border-radius + margin-width
當border-radius > margin-width時，margin-width=1 + (margin-width/border-radius-1)^3以確保margin-radius趨向于直角。

padding box圓角了

公式：padding-radius = border-radius + border-width
當padding-radius為0時，渲染為直角
content box/area圓角了

公式：content-radius = border-radius + border-width - padding-width
當content-radius為0時，渲染為直角

注意
由于margin區(qū)域無法觸發(fā)點擊等事件，而圓角border box所占面積必定小于直角border box，因此為保持可點擊區(qū)域面積，圓角border box應(yīng)設(shè)置更大的高寬值。

話說"大值特性"和"等比特性"

?@張鑫旭老師在《秋月何時了，CSS3 border-radius知多少？》提到"大值特性"和"等比特性"兩個特性。

你看div.s2明明把左上角的水平和垂直半徑設(shè)置為200px，但實際效果卻是兩者結(jié)果值均為100px，難道這就是"大值特性"？

僅僅看div.s1水平方向的橢圓半徑，left和right相加300+900=1200遠遠大于border box的寬度200px，也就是說兩個橢圓將發(fā)生重疊。對于這種情況CSS渲染引擎到底是如何處理的呢？

首先明確的是left+right必須小于等于border-box的寬度，也就是說兩個橢圓不能發(fā)生重疊。

然后根據(jù)"等比例特性"得到left/(left+right)=300/(300+900)=1/4，right/(left+right)=900/(300+900)=3/4，得到left結(jié)果值為200/4=50，right結(jié)果值為3*200/4=150。

?通過"等比例特性"我們很好地解釋了上圖中水平方向的效果，但大家有沒有發(fā)現(xiàn)垂直方向的半徑有點奇怪呢？我們明明設(shè)置半徑為100px，而且border box的高度恰好也是100px，按理應(yīng)該是足夠的，為何垂直半徑的結(jié)果值不是100px呢？
?其實W3C Spec中已經(jīng)說得很清楚了！

Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of the two corresponding radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f.

其實"最大值特性"和"等比例特性"只是上述規(guī)則的表象而已，最根本的公式為f=min(Li/Si)
以第二個示例來計算一下吧
計算f的值

top-left和top-right的水平半徑之和為1200px，而border box寬度為200px，那么f1=200/1200=1/6;

top-left和bottom-left的垂直半徑之和為400px，而border box高度為400px，那么f2=400/400=1;

bottom-left和bottom-right的水平半徑為0，忽略;

top-right和bottom-right的垂直半徑之和為400px，而border box高度為400px，那么f3=400/400=1;

f=min(f1,f2,f3)，結(jié)果為f=f1

縮放各半徑

top-left和top-right的水平半徑分別乘以f，得到結(jié)果值300/6=50，900/6=150;

top-left和top-right的垂直半徑分別乘以f，得到結(jié)果值400/6=66.66。

被忽視的豬腳——相交線

?當設(shè)置border-left和border-top后，我們很容易預測到左邊框和上邊框的樣式，但它倆相交部分的樣式呢？這里就涉及到相交線的問題了！

通過直角邊框找相交線

?圓角邊框是基于直角邊框的，這一點也體現(xiàn)在相鄰邊框的相交線上。


?我們可以看到兩邊相交所形成的矩形的對角線，將作為邊的相交點。通過相交點判斷邊框樣式應(yīng)應(yīng)用到哪一條邊上。
透視圖如下

延長相交線

?由于圓角邊框不像直角邊框那樣有棱有角，因此更難以分辨邊框樣式所對應(yīng)的邊框。但只要我們沿直角邊框的相交線向圖形內(nèi)延伸，一切則清晰明了了。


透視圖如下

兼容性


?雖然各大瀏覽器均支持border-radius屬性，但其實現(xiàn)效果卻不盡相同，我們拿極端情況來作試驗，最能看出效果。結(jié)論是讓我們大跌眼鏡的：IE效果最為理想??！

chrome34中

FF中

IE9

總結(jié)

?尊重原創(chuàng)，轉(zhuǎn)載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5458573.htm^_^肥仔John

感謝

CSS Backgrounds and Borders Module Level 3 4. Borders
秋月何時了，CSS3 border-radius知多少？
CSS滑動門Sliding door詳解
《圖解CSS3核心技術(shù)與案例實戰(zhàn)》——第3章 CSS3邊框

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115243.html

相關(guān)文章

  • CSS魔法堂：重拾Border之——更廣闊的遐想

    摘要：也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設(shè)計師幫忙。 前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比...

    lily_wang 評論0 收藏0

  • CSS魔法堂：重拾Border之——解構(gòu)Border

    摘要：本系列將稍微深入探討一下那個貌似沒什么好玩的魔法堂重拾之解構(gòu)魔法堂重拾之圖片作邊框魔法堂重拾之不僅僅是圓角魔法堂重拾之更廣闊的遐想解構(gòu)說起我們自然會想起，而由條緊緊包裹著的邊組成，所以的最小操作單元是。 前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)...

    lingdududu 評論0 收藏0

  • CSS魔法堂：重拾Border之——圖片作邊框

    摘要：一鋪搞定一鋪清袋粵語的一鋪搞定其實就是一次完成全部工作的意思，上面關(guān)于的屬性，要是每次都逐個設(shè)置那要敲多少次鍵盤啊。。。語法粵語的一鋪清袋其實就是把之前的成果一次性歸零。 前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/...

    linkFly 評論0 收藏0

  • CSS魔法堂：Box-Shadow 沒那么簡單啦:)

    摘要：陰影距離原位置的垂直位移，正數(shù)表示向下移動，負數(shù)表示向上移動。實現(xiàn)原理純個人理解創(chuàng)建一個與元素尺寸一致的陰影盒子將陰影盒子定位到于元素重合，并位于元素之上水平和垂直各畫兩條線，分別跟元素重合共條分別記為根據(jù)和移動。 前言 說起box-shadow那第一個想法當然就是用來實現(xiàn)陰影，其實它還能用于實現(xiàn)其他好玩的效果的，本篇就打算說說box-shadow的那些事。 二話不說看效果 showI...

    Galence 評論0 收藏0

  • CSS魔法堂：那個被我們忽略的outline

    摘要：真心沒法弄出圓角自從有了后，我們就可以通過制作圓角矩形圓形等圖形，甚至連也受到影響從而實現(xiàn)元素陰影也能做到圓角的效果。那么是否也能做出圓角的效果呢答案是否定的。 前言 ?在CSS魔法堂：改變單選框顏色就這么吹毛求疵！中我們要模擬原生單選框通過Tab鍵獲得焦點的效果，這里涉及到一個常常被忽略的屬性——outline，由于之前對其印象確實有些模糊，于是本文打算對其進行稍微深入的研究^_^ ...

    Rocko 評論0 收藏0

發(fā)表評論

0條評論

_Dreams

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<