這篇文章主要介紹“CSS3邊框模塊知識點有哪些”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS3邊框模塊知識點有哪些”文章能幫助大家解決問題。
創(chuàng)新互聯(lián)公司是專業(yè)的新津縣網(wǎng)站建設(shè)公司，新津縣接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行新津縣網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
以前我們只能為邊框設(shè)置純色和單調(diào)的樣式，而css3為邊框提供了許多新的屬性以支持更復(fù)雜的效果。
邊框圓角：border-radius
邊框的圓角屬性border-radius是CSS3最常用的屬性之一，有了這個屬性我們以后不再需要圖片資源來實現(xiàn)邊框圓角，它的格式如下：
[長度或百分比]{1,4}[/長度或者百分比{1,4}]?
上面的寫法是標(biāo)準(zhǔn)的CSS屬性值描述語法，類似于常見的正則表達(dá)式。{1,4}表示1到4之間（包括1和4）的一個數(shù)字，“?”號表示0個或者1個。上面的格式前后用/分隔，第一段可以有1到4個長度或者百分比值，第二段也可以有1到4個長度或者百分比值，但第二段值可以不設(shè)置。
例如，下面的形式都是合法的：
25px/20px
25px20px
25px25px/20px
第一段的值定義4個圓角橫向的半徑，第二段的值定義4個圓角縱向的半徑，4個值按照順序設(shè)置top-left、top-right、bottom-right和bottom-left4個圓角。第二段的值不設(shè)置時，縱向半徑等于橫向半徑，例如x1x2x3x4和x1x2x3x4/x1x2x3x4的含義一致。
border-radius:x1x2x3x4/y1y2y3y4的設(shè)置效果如下圖所示：
下面給出一個圓角示例：
border-radius可分解為4個屬性border-top-left-radius、border-top-rightradius、border-bottom-right-radius、border-bottom-left-radius，我們能用這4
個屬性來分別設(shè)置4個角的圓角。
border-radius有一個非常有趣的功能：實現(xiàn)各種圓形效果。實現(xiàn)一個圓的代碼如下：
width:100px;
height:100px;
border-radius:50px;
background-color:#2ec8e9;
實現(xiàn)1/4個圓的代碼如下：
width:100px;
height:100px;
border-bottom-left-radius:100px;
background-color:#2ec8e9;
實現(xiàn)1/8個圓的代碼如下：
width:0px;
border-left:100pxsolidtransparent;
border-top:100pxsolid#2ec8e9;
border-top-left-radius:100px;
邊框顏色：border-color
利用邊框顏色屬性border-color，我們能夠為邊框創(chuàng)建非常酷炫的顏色效果，比如下面的代碼：
colors:#500#700#900#b00;border-right-colors:#500#700#900#b00;padding: 5px10px;"> HTML5與CSS3之美。
邊框圖像：border-image
邊框圖像屬性讓我們能夠使用圖片來定義邊框的樣式。它的另外一個作用是可以采用類似于Windows桌面背景的方式來設(shè)定邊框，用一張小圖片來實現(xiàn)一個大的邊框效果。
border-image屬性可以分解為4個屬性，即border-image-source、border-imageslice、border-image-width和border-image-repeat，下面詳細(xì)介紹一下這4個屬性。
1.border-image-source
border-image-source用于指定邊框圖像的URL地址，這類似于background-url屬性。
2.border-image-slice
border-image-slice屬性會將圖像分成9個格子，按照設(shè)置的值對圖像進(jìn)行裁切，如下圖所示可以像margin一樣，為它設(shè)置一個值或多個值。設(shè)置一個值時top、right、bottom、left方向的裁切都使用這個值；設(shè)置兩個值時，top和bottom采用前面一個值，left和right采用后面一個值；設(shè)置3個值時，top采用第一個值，left和right采用第二個值，bottom采用第三個值；如果設(shè)置4個值，就分別對應(yīng)top、right、bottom、left這4個方向。
這里可以說明一下，border-image-slice可以按照百分比和像素進(jìn)行裁切，方式如下圖所示：
注意border-image-slice按照像素進(jìn)行裁切時，其值是沒有單位的，比如border-imageslice:17。
3.border-image-width
border-image-width定義邊框圖像的顯示區(qū)域，它需要和border-image-slice一起使用，用斜線分隔，其寫法為border-image-slice/border-image-width。另外，我們可以使用border-width屬性來定義邊框的寬度，以下兩種格式的效果是完全一樣的：
border-image:url(border.png)50/17px;
/*50即border-image-slice的值，17px即border-image-width屬性的值*/
和
border-image:url(border.png)50;border-width:17px;
注意和border-image-slice不一樣，border-image-width值必須要加上單位，如17px。
4.border-image-repeat
border-image-repeat定義裁剪的top、right、bottom、left圖像如何排布，是縮放還是平鋪，它有3個值，分別是stretch、repeat和round。stretch是默認(rèn)值，代表拉伸，repeat代表重復(fù)，round代表平鋪。repeat和round的區(qū)別在于設(shè)置為repeat時，可以只顯示圖像的一部分，而設(shè)置為round時，如果長度或者寬度不是圖像的整數(shù)倍，圖像將會拉伸，以保證顯示的圖像數(shù)量是整數(shù)。
stretch、repeat、round這3種方式的顯示效果如下圖所示，請注意repeat和round的細(xì)微差別。
注意border-image-repeat的值不能超過2個。當(dāng)值為兩個時，前面一個定義top和bottom邊框圖像的排布方式，而后一個定義left和right邊框圖像的排布方式。另外截至成書時，在WebKit內(nèi)核瀏覽器（如Chrome和Safari）中，round值尚未實現(xiàn)，其效果和repeat一致。
以上4個屬性可以合成為border-image屬性。在CSS標(biāo)準(zhǔn)中，采用單個屬性或者合成的形式都可以，只是現(xiàn)在許多瀏覽器并不支持單獨屬性的形式。以下兩種代碼的效果完全一樣：
border-image-source:url(border.png);
border-image-slice:105;
border-image-width:12px;
border-image-repeat:repeat;
和
border-image:url(border.png)105/12pxrepeat;
好了，通過border-image屬性，我們就能通過一副小圖片實現(xiàn)自適應(yīng)的復(fù)雜邊框效果。
盒陰影：box-shadow
盒陰影屬性box-shadow可以為盒子元素設(shè)置陰影效果，其格式如下：
box-shadow:陰影類型x軸位移y軸位移模糊半徑陰影大小陰影顏色
下面簡要介紹一下其中各個參數(shù)的作用。
?陰影類型不設(shè)置時，默認(rèn)為外陰影，設(shè)置為inset時表示內(nèi)陰影。
?x軸位移表示陰影在水平方向上的位移，正值表示向右偏移，負(fù)值表示向左偏移。
?y軸位移表示陰影在垂直方向上的位移，正值表示向下偏移，負(fù)值表示向上偏移。
?模糊半徑控制陰影的模糊區(qū)域大小，值為0表示陰影不模糊。
?陰影大小控制陰影的大小和范圍。9819
關(guān)于“CSS3邊框模塊知識點有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
重慶分公司
重慶分公司
