国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

lingdududu / 1938人閱讀

摘要：本系列將稍微深入探討一下那個(gè)貌似沒(méi)什么好玩的魔法堂重拾之解構(gòu)魔法堂重拾之圖片作邊框魔法堂重拾之不僅僅是圓角魔法堂重拾之更廣闊的遐想解構(gòu)說(shuō)起我們自然會(huì)想起，而由條緊緊包裹著的邊組成，所以的最小操作單元是。

前言

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

解構(gòu)Border

?說(shuō)起border我們自然會(huì)想起border box，而border box由4條緊緊包裹著padding box的邊(line)組成，所以border的最小操作單元是line。
?line具有厚度(line thickness)、樣式(line pattern)和顏色(line color)3個(gè)特性，因此我們必須也只能圍繞它們做文章了！

Line Thickness

border-width:(medium|thin|thick|){1,4}
默認(rèn)值medium，當(dāng)font-size為17px或以下時(shí)，medium為1px、3px或5px，具體有UA決定。
大小關(guān)系：thin <= medium <= thick
另外有4個(gè)子屬性border-top/right/bottom/left-width:medium|thin|thick|

Line Color

border-color:(|transparent){1,4}|inherit
默認(rèn)值與color屬性值一致

hello world

另外有4個(gè)子屬性border-top/right/bottom/left-color:|transparent|inherit

Line Patterns

border-style:(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset){1,4}
默認(rèn)值none，表示忽略border-color和border-width的屬性值，打死不顯示border。
hidden，效果與none一樣，只是應(yīng)用于border-collapsed的表格上時(shí)不會(huì)發(fā)生沖突而已。

注意：各瀏覽器的效果是有差異的哦！
另外有4個(gè)子屬性border-top/right/bottom/left-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

合體技——一次搞定Thickness、Pattern和Color

border: ? ?
其中和是可選，而為必填項(xiàng)。
另外有4個(gè)子屬性border-top/right/bottom/left:? ?

自定義彩虹——border-top/right/bottom/left-colors

border-top/right/bottom/left-colors:(|transparent){1,}|inherit
?多顏色border規(guī)則

顏色從外至內(nèi)排列;

每種顏色占1px。若border-width大于顏色種類，則最后一種顏色占據(jù)剩余的寬度；若border-width小于顏色中類，則舍棄多余的顏色。
?兼容性：就FF3.0+支持而已
總結(jié)

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

感謝

CSS Backgrounds and Borders Module Level 3 4. Borders

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115227.html

相關(guān)文章

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

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

    lily_wang 評(píng)論0 收藏0

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

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

    linkFly 評(píng)論0 收藏0

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

    摘要：擼代碼實(shí)現(xiàn)首頁(yè)檢驗(yàn)單查詢成品通用標(biāo)準(zhǔn)審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對(duì)角線，將作為邊的相交點(diǎn)。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right...

    _Dreams 評(píng)論0 收藏0

  • CSS魔法堂：Box-Shadow 沒(méi)那么簡(jiǎn)單啦:)

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

    Galence 評(píng)論0 收藏0

  • CSS魔法堂：那個(gè)被我們忽略的outline

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

    Rocko 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<