基礎(chǔ)樣式

??邊框是一條以空格分隔的集合樣式，包括邊框粗細(邊框?qū)挾?、邊框顏色和邊框樣式，且先后順序無關(guān)

    border: border-width border-color border-styleborder: 1px solid red;

【邊框樣式】

??如果一個邊框沒有樣式，邊框?qū)⒏静粫嬖?/p>

??關(guān)于虛線dashed，在chrome/firefox下，虛線寬高比是3/1；而在IE下，虛線寬高比為2/1。所以在IE下虛線顯得比較密

??關(guān)于點線dotted，在chrome下，點線是方點；而在IE/firefox下，點線是圓點

border-style:none(默認)
border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9種)

【邊框?qū)挾取?/p>

??邊框的寬度不能為負，不能指定為百分比值。這是因為，邊框并不會因為設(shè)備尺寸變大，所以百分比單位并不符合語義。類似地，還有outline、box-shadow、text-shadow等

??邊框?qū)挾戎С?個關(guān)鍵字：this/medium/thick，分別是1px、3px、5px，且medium為默認值。medium為3px是因為邊框樣式double至少為3px為有效果

    border-width: thin/medium(默認)/thick/<length>

【邊框顏色】

??默認的邊框顏色是元素本身的前景色，即元素的文本顏色；如果元素沒有任何文本，則邊框顏色是其父元素的文本顏色。但是，在表格中，若只設(shè)置border-style，而不設(shè)置border,則邊框顏色為黑色，而不與文本顏色相同。類似地，還有text-shadow、box-shadow等

    border-color: transparent/<color>

邊框要點

【注意事項】

??邊框有以下幾個要點需要特別注意：

??1、邊框繪制在元素背景之上，如果邊框樣式有某種縫隙，可以通過這些縫隙看到元素的背景(有兼容問題)

??2、同一元素的邊框相交處是斜線，可以用邊框?qū)崿F(xiàn)三角形

??3、行內(nèi)元素的上下邊框由于不影響行高，不影響布局；左右邊框會影響布局

??4、在CSS2.1中，背景定位background-position只能相對于左上角定位。如果需要是相對于右側(cè)，則可以使用一個右側(cè)的透明邊框來實現(xiàn)類似的效果

【邊框單邊】

        border-top/border-right/border-bottom/border-left

【邊框?qū)傩浴俊舅闹淀樞颉?/p>

    border-width: 1px 2px 3px 4px;//上右下左border-width: 1px 2px 3px;//上(左右)下border-width: 1px 2px;//(上下)(左右)border-width: 1px;//(上下左右)

圓角邊框

??圓角邊框border-radius可以為邊框設(shè)置圓角(IE8-不支持)，四值順序是左上、右上、右下、左下

border-radius: none(默認)
border-radius: <length>{1,4}[/<length>{1,4}]?
//如果反斜杠存在，前面的值是水平方向的半徑，后面的值是垂直方向的半徑。如果沒有則水平和垂直方向相等

??關(guān)于圓角邊框有如下注意事項：

??1、<length>可以是具體值，也可以是百分比，但不是負數(shù)

??2、重置border-radius沒有圓角，使用none無效，需要取值0

??3、border-radius對<img>沒有任何效果

??4、如果取值為百分比，水平方向圓角百分比相對于寬度，垂直方向圓角百分比相對于高度

【圓角單角】

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius
border-top-left-radius: 10px 20px;

??[注意]寫圓角單角時不可加/

【四值順序】

??四值順序是左上、右上、右下、左下

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

【內(nèi)徑外徑】

??border-radius內(nèi)徑 = 外徑 - 對應的邊框?qū)挾?/p>

??當border-radius半徑值小于等于邊框?qū)挾葧r，元素沒有內(nèi)徑效果

【特殊圖形】

圓形

??元素的寬高相同，且圓角半徑為寬高的一半

div{width: 100px;height: 100px;border-radius: 50%;
}

半圓

??元素寬高不同，且圓角半徑與寬高要配合

div{width: 100px;height: 50px;border-radius: 50px 50px 0 0;
}