border :基本語法

border: border-width || border-style || border-color 默認值為： medium none 。

border-color 的默認值將采用文本顏色

相關屬性：

border-top,border-left,border-right,border-bottom:它們分別對邊框的某個方向起作用，語法基本與border相同

border-bottom-color，border-top-color,border-bottom-color,border-right-color:分別設置某個邊框的顏色：

例如border-bottom-color：red設置下邊框的顏色為紅色

border-bottom-width，border-top-width,border-bottom-width,border-right-width:分別設置某個邊框的寬度：

基本語法：border-bottom-width : medium | thin | thick | length 其中length由浮點數字和單位標識符組成的長度值。不可為負值,例如border-bottom-width :thin；

border-bottom-style，border-top-style,border-bottom-style,border-right-style:分別設置某個邊框的樣式：

基本語法：border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none??? :　 默認值。無邊框。不受任何指定的 border-width 值影響

hidden? :　 隱藏邊框。

IE不支持 dotted? :　 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線

dashed? :　 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線

solid?? :　 實線邊框

double? :　 雙線邊框。兩條單線與其間隔的和等于指定的 border-width 值

groove? :　 根據 border-color 的值畫3D凹槽

ridge?? :　 根據 border-color 的值畫菱形邊框

inset?? :　 根據 border-color 的值畫3D凹邊

outset? :　 根據 border-color 的值畫3D凸邊

CSS3.0新增： 設置圓角： border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

相關屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值：

<length>： 由浮點數字和單位標識符組成的長度值。不可為負值。

border-top-left-radius： 由浮點數字和單位標識符組成的長度值。不可為負值。

說明：第一個值是水平半徑。如果第二個值省略，則它等于第一個值，這時這個角就是一個四分之一圓角。 如果任意一個值為0，則這個角是矩形，不會是圓的。 值不允許是負值。

例如： border-radius ：4px;

邊框對象顏色： border-color ： <color>

相關屬性 ：border-top-color, border-right-color, border-bottom-color , border-left-color 設置對象邊框的顏色。

使用CSS3的border-radius屬性，如果你設置了border的寬度是X px，那么你就可以在這個border上使用X種顏色，每種顏色顯示1px的寬度。如果說你的border的寬度是10個像素，但是只聲明了5或6種顏色，那么最后一個顏色將被添加到剩下的寬度。

例如針對上例中的邊框設置為4px,顏色可以設置為4中不同的顏色 border-color:#555 #666 #777 #888

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

相關屬性 ： border-image：border-top-image , border-right-image , border-bottom-image , border-left-image，border-corner-image：border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image 取值：none： 默認值。無背景圖。

<image>： 使用絕對或相對 url 地址指定背景圖像。

<number>： 邊框寬度用固定像素值表示。

<percentage>： 邊框寬度用百分比表示。 [ stretch | repeat | round ]： 拉伸 | 重復 | 平鋪 (其中stretch是默認值。)

border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;

設置邊框陰影： box-shadow：<length> <length> <length> <length> || <color>

相關屬性：text-shadow 取值：<length> <length> <length>? <length>? || <color>： 陰影水平偏移值（可取正負值）；陰影垂直偏移值（可取正負值）；陰影模糊值；陰影顏色 box-shadow:5px 2px 6px #000

轉載于:https://www.cnblogs.com/yhq361/p/4207407.html

總結

以上是生活随笔為你收集整理的css3背景、边框、和补丁相关属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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