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

Border-radius:

一、語法：

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

二、取值：

Length：具體數(shù)值；

Percentage：百分比，相對于寬高的百分比；

Border-radius是一種縮寫形式，如margin；

當border-radius：x//一個值，表示top-left、top-right、bottom-right、bottom-left四個值相等，等于x 。

當border-radius：x n //兩個值，表示：top-left == bottom-right == x、top-right == bottom-left == n，簡單地說就是對角相等；

當border-radius：x n m  //三個值，表示top-left == x 、top-right == bottom-left == n、bottom-right == m；

當border-radius：x n m s //四個值，表示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;

其中“/”前為水平方向，“/”后為垂直方向，如果沒有“/”,則默認水平垂直相等；

最后一句表示對某一角做水平垂直的單獨設置；

拆分角的書寫方式：

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屬性中，四個角的方向是由Y軸-X軸定的，這就是為什么我們看到top/bottom在前，left/right在后的道理了。

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

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

Border-color:

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

一、語法：

border-colors：color；

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

并且，border-colors：colorcolorcolor...縮寫格式是錯誤的。

正確的書寫格式：

-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;

例如這種分開寫；

Border-image:

一、語法：

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

二、參數(shù)：

1、none:是border-image的默認值，如果取值為none時，表示邊框無背景圖片；

2、<image>：設置border-image的背景圖片，這個跟background-image一樣，使用絕對或相對的url地址，來指定背景圖片；

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

4、<percntage>：percntage也是用來設置邊框的寬度，跟number不同之處是，其使用的是百分比值來設置邊框寬度；

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

border-image分解為：

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

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

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

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

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

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

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

中間部分不作用。

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

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

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

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

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

總結

以上是生活随笔為你收集整理的css3中的border属性值的全部內容，希望文章能夠幫你解決所遇到的問題。

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