邊框是CSS盒模型屬性中默默無聞的一個普通屬性，CSS3的到來，但得邊框?qū)傩灾匦聼òl(fā)了光彩。本文將詳細介紹CSS邊框

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、班瑪網(wǎng)站維護、網(wǎng)站推廣。

基礎(chǔ)樣式

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

    border: border-width border-color border-style    border: 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>

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

<演示框>點擊下列相應(yīng)屬性值可進行演示

邊框要點

【注意事項】

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

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:
        border-top-width    border-right-width
        border-bottom-width    border-left-width

    border-style:
        border-top-style    border-right-style
        border-bottom-style    border-left-style

    border-color：
        border-top-color    border-right-color
        border-bottom-color    border-left-color

【四值順序】

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

多色邊框

多色邊框border-colors可以在一條邊框上設(shè)置多種顏色

[注意]只有firefox支持，需要加-moz-前綴，且只能四條邊分開寫，否則無效

    border-colors:<color><color>……    border: 10px solid black;    -moz-border-top-colors: red green;    -moz-border-right-colors: green yellow;    -moz-border-bottom-colors: yellow blue;    -moz-border-left-colors: blue red;

圓角邊框

圓角邊框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)徑 = 外徑 - 對應(yīng)的邊框?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;
}

扇形

元素寬高及一個圓角半徑相同

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

橢圓

元素寬高不同，且水平和垂直半徑分別對應(yīng)寬高

div{    width: 120px;    height: 80px;    border-radius: 120px/80px;
}

盒子陰影

盒子陰影box-shadow可以為元素設(shè)置陰影(IE8-不支持)

box-shadow: none(默認)box-shadow: (h-shadow v-shadow blur spread color inset)+;h-shadow: 水平陰影位置(必須)v-shadow: 垂直陰影位置(必須)blur:     模糊距離(可選)spread:   陰影尺寸(可選)color:    陰影顏色，默認和文本顏色一致(可選)inset:    內(nèi)部陰影(可選)    
box-shadow:10px 10px red,20px 20px blue;

使用盒子陰影box-shadow時，有如下幾點注意事項：

1、可以使用多重陰影，但使用過多會造成性能差

2、邊框在內(nèi)陰影之上，內(nèi)陰影在背景圖片之上，背景圖片在背景色之上，背景色在外陰影之上

3、內(nèi)陰影對<img>元素沒有任何效果

4、最先寫的陰影在最頂層

5、該屬性與border-radius一脈相承，若通過border-radius設(shè)置為圓角，則box-shadow的最終呈現(xiàn)也將是圓角

【模擬邊框】

box-shadow: 0 0 0 10px blue;

<演示框>點擊下列相應(yīng)屬性值可進行演示

圖片邊框

圖片邊框border-p_w_picpath可以在邊框位置設(shè)置圖片(IE10-不支持)

border-p_w_picpath: none(默認)
border-p_w_picpath: border-p_w_picpath-source || border-p_w_picpath-slice [ / border-p_w_picpath-width? | / border-p_w_picpath-outset ]? || border-p_w_picpath-repeat;

[注意]該屬性的作用是用來替代border-style的，若border-p_w_picpath為none，則顯示border-style的值

border-p_w_picpath: url('img.img') 27 fill / 27 / 27px repeat;

【border-p_w_picpath-source】

邊框的圖片路徑

border-p_w_picpath-source:url('test.img');

【border-p_w_picpath-slice】

圖片邊框四條切割線的位置

border-p_w_picpath-slice:  <number> | <percentage> fill

使用border-p_w_picpath-slice時，有如下幾點注意事項：

1、若不寫單位，具體值默認單位是px

2、fill表示圖片邊框的中間部分將保留下來

3、四值方向是上右下左，代表切割線的方向，切割的分別是高寬高寬

4、圖片邊框是在邊框范圍內(nèi)顯示的，若邊框?qū)挾炔坏扔趕lice切片值，則圖片邊框會按比例放大縮小，以使圖片邊框正好顯示在邊框范圍內(nèi)

5、若slice值為負，或大于盒子的寬度或高度會被100%，四個角將顯示整個背景圖片

6、若右切和左切大于盒子寬度，則上中和下中部分為空；若上切和下切大于盒子高度，則左中和右中部分為空

【border-p_w_picpath-width】

邊框?qū)挾萣order-p_w_picpath-width。若指定該值，則邊框圖片寬度由該值確定，否則由盒子的邊框?qū)挾葋泶_定。該值可以用具體像素、數(shù)字(表示幾倍)以及百分比來表示，遵循四值順序

border-p_w_picpath-width: <length> | <percentage> | <number> | auto

【border-p_w_picpath-outset】

border-p_w_picpath-outset表示邊框圖像區(qū)域超出邊框的量，可以用具體像素和數(shù)字(表示幾倍)表示，遵循四值順序

border-p_w_picpath-outset:0(默認)border-p_w_picpath-outset: <length> | <number>

【border-p_w_picpath-repeat】

邊框圖片的排列方式

border-p_w_picpath-repeat: stretch(拉伸,默認) | repeat(重復(fù)) | round(平鋪) [1,2]//第一個值表示水平方向的排列方式，第二個值表示垂直方向的排列方式

在上面的屬性值中，repeat是邊框中間向兩端平鋪，可能造成兩端邊緣被切的現(xiàn)象；而round會對邊框背景圖的切片進行縮放，使其正好顯示

【按鈕實現(xiàn)】

div{    display: inline-block;    border-p_w_picpath: url('button.png') 16 fill/ auto / 5px;
}

應(yīng)用

【三道杠效果】

&emsp;&emsp;三道杠可以使用邊框來實現(xiàn)，上面兩道杠使用上邊框的double樣式，下面一道杠使用下邊框的solid樣式<style>.box{    color: red;    width: 60px;    height: 10px;    border-top: 30px double;    border-bottom: 10px solid;    transition: color 0.5s;
}.box:hover{    color:pink;
}</style><div class="box"></div>

【十字效果】

<style>.box{    position: relative;    color: blue;    border: 4px solid;    width: 40px;    height: 40px;    transition: color 0.2s;
}.box:before{    content:"";    border-top:10px solid;  
    display: block;    position: absolute;    width: 30px;    top:15px;    left:5px;
}.box:after{    content:"";    position: absolute;    top: 5px;    left: 15px;    border-left:10px solid;    height: 30px;
} 
.box:hover{    color: lightblue;
}</style><div class="box"></div>

【信封效果】

可以使用圖片邊框border-p_w_picpath來實現(xiàn)航空信封的效果。圖片邊框使用線性漸變來實現(xiàn)

<style>.box {  width: 200px;  height: 100px;  padding: 10px;  border: 10px solid;  border-p_w_picpath: repeating-linear-gradient(-225deg, red 0, red 10px, transparent 10px, transparent 20px, #58a 20px, #58a 30px, transparent 30px, transparent 40px) 20;
}</style><div class="box" contenteditable ="true">請修改文字</div>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：CSS邊框border-創(chuàng)新互聯(lián)
本文路徑：http://jinyejixie.com/article6/ddspig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)