border :基本語法

border: border-width || border-style || border-color 默認(rèn)值為： medium none 。

border-color 的默認(rèn)值將采用文本顏色

相關(guān)屬性：

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

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

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

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

基本語法：border-bottom-width : medium | thin | thick | length 其中l(wèi)ength由浮點數(shù)字和單位標(biāo)識符組成的長度值。不可為負(fù)值,例如border-bottom-width :thin；

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

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

hidden? :　 隱藏邊框。

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

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

solid?? :　 實線邊框

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

groove? :　 根據(jù) border-color 的值畫3D凹槽

ridge?? :　 根據(jù) border-color 的值畫菱形邊框

inset?? :　 根據(jù) border-color 的值畫3D凹邊

outset? :　 根據(jù) border-color 的值畫3D凸邊

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

相關(guān)屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值：

<length>： 由浮點數(shù)字和單位標(biāo)識符組成的長度值。不可為負(fù)值。

border-top-left-radius： 由浮點數(shù)字和單位標(biāo)識符組成的長度值。不可為負(fù)值。

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

例如： border-radius ：4px;

邊框?qū)ο箢伾?#xff1a; border-color ： <color>

相關(guān)屬性 ：border-top-color, border-right-color, border-bottom-color , border-left-color 設(shè)置對象邊框的顏色。

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

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

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

相關(guān)屬性 ： 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： 默認(rèn)值。無背景圖。

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

<number>： 邊框?qū)挾扔霉潭ㄏ袼刂当硎尽?/p>

<percentage>： 邊框?qū)挾扔冒俜直缺硎尽?[ stretch | repeat | round ]： 拉伸 | 重復(fù) | 平鋪 (其中stretch是默認(rèn)值。)

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

設(shè)置邊框陰影： box-shadow：<length> <length> <length> <length> || <color>

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

轉(zhuǎn)載于:https://www.cnblogs.com/yhq361/p/4207407.html

總結(jié)

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

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