CSS3中有關(guān)于Border的屬性一共有三個(gè)：圓角border-radius,邊框多顏色border-color，圖片邊框border-image，其中圓角border-radius是常用的一個(gè)屬性，而且現(xiàn)在很多網(wǎng)站制作圓角效果都使用border-radius來(lái)實(shí)現(xiàn)；本文會(huì)依次介紹這三個(gè)屬性；

Border-radius:

一、語(yǔ)法：

Border-radius:[length|percentage]{1,4}[/[length|percentage]{1,4}]?

二、取值：

Length：具體數(shù)值；

Percentage：百分比，相對(duì)于寬高的百分比；

Border-radius是一種縮寫(xiě)形式，如margin；

當(dāng)border-radius：x//一個(gè)值，表示top-left、top-right、bottom-right、bottom-left四個(gè)值相等，等于x 。

當(dāng)border-radius：x n //兩個(gè)值，表示：top-left == bottom-right == x、top-right == bottom-left == n，簡(jiǎn)單地說(shuō)就是對(duì)角相等；

當(dāng)border-radius：x n m  //三個(gè)值，表示top-left == x 、top-right == bottom-left == n、bottom-right == m；

當(dāng)border-radius：x n m s //四個(gè)值，表示top-left == x 、top-right ==n、bottom-right == m、 bottom-left == s；

例：

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

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

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

其中“/”前為水平方向，“/”后為垂直方向，如果沒(méi)有“/”,則默認(rèn)水平垂直相等；

最后一句表示對(duì)某一角做水平垂直的單獨(dú)設(shè)置；

拆分角的書(shū)寫(xiě)方式：

border-top-left-radius: <length>  <length>   //左上角

border-top-right-radius: <length>  <length>  //右上角

border-bottom-right-radius:<length>  <length>  //右下角

border-bottom-left-radius:<length>  <length>   //左下角

在border-radius屬性中，四個(gè)角的方向是由Y軸-X軸定的，這就是為什么我們看到top/bottom在前，left/right在后的道理了。

這里說(shuō)一下，各角拆分出來(lái)取值方式：<length><length>中第一個(gè)值是圓角水平半徑，第二個(gè)值是垂直半徑,如果第二個(gè)值省略，那么其等于第一個(gè)值，這時(shí)這個(gè)角就是一個(gè)四分之一的圓角，如果任意一個(gè)值為0，那么這個(gè)角就不是圓角。

另注：為了瀏覽器版本兼容，屬性上還是要交內(nèi)核前綴如：-moz-border-radius和-webkit-border-radius等，但border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面。

Border-color:

瀏覽器支持情況：Mozilla的Firefox3.0+瀏覽器；

一、語(yǔ)法：

border-colors：color；

寬度設(shè)置了Npx,那么你可以在這個(gè)邊框上使用N種顏色；

并且，border-colors：colorcolorcolor...縮寫(xiě)格式是錯(cuò)誤的。

正確的書(shū)寫(xiě)格式：

-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

-moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

例如這種分開(kāi)寫(xiě)；

Border-image:

一、語(yǔ)法：

 border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

二、參數(shù)：

1、none:是border-image的默認(rèn)值，如果取值為none時(shí)，表示邊框無(wú)背景圖片；

2、<image>：設(shè)置border-image的背景圖片，這個(gè)跟background-image一樣，使用絕對(duì)或相對(duì)的url地址，來(lái)指定背景圖片；

3、<number>：number是一個(gè)數(shù)值，用來(lái)設(shè)置邊框的寬度，其單位是px，其實(shí)就像border-width一樣取值，可以使用1~4個(gè)值，其具體表示四個(gè)方位的值，大家可以參考border-width的設(shè)置方式；

4、<percntage>：percntage也是用來(lái)設(shè)置邊框的寬度，跟number不同之處是，其使用的是百分比值來(lái)設(shè)置邊框?qū)挾龋?/p>

5、stretch,repeat,round:他們是用來(lái)設(shè)置邊框背景圖片的鋪放方式，類(lèi)似于background-position，其中stretch是拉伸，repeat是重復(fù)，round是平鋪，stretch為默認(rèn)值。

border-image分解為：

1、引入圖片：border-image-source;

2、切割引入的圖片：border-image-slice；

border-image-slice:[<number>|<percentage>]{1,4}&&fill?

簡(jiǎn)單的說(shuō)是根據(jù)這個(gè)屬性的參數(shù)把背景圖切割成了九宮格如：

A	1	B
4	中間部分	2
D	3	C

如圖中所示區(qū)域，ABCD四個(gè)區(qū)域中的切割圖片分別作用在了border的四個(gè)角上。

而1234四個(gè)部分的切割圖片分別作用在了border的四條邊上。

中間部分不作用。

上下區(qū)域1和3區(qū)域受到水平方向效果影響：如果是repeat作用此區(qū)域圖片會(huì)水平重復(fù)，如果是round則水平平鋪；如果是stretch則被水平拉伸。

左右區(qū)域2和4區(qū)域受豎直方向影響，如果是如果是repeat作用此區(qū)域圖片會(huì)豎直重復(fù)，如果是round則豎直平鋪；如果是stretch則被豎直拉伸。

3、邊框的寬度：border-image-width；

4、圖片的排列方式：border-image-repeat。

接受一個(gè)、兩個(gè)參數(shù)，表示水平方向或豎直方向。

總結(jié)

以上是生活随笔為你收集整理的css3中的border属性值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。