css中的border屬性。。。。。

2021-07-25 12:51:00 字數 1499 閱讀 2759

1.border-color(邊框的顏色)

一般設定邊框都有3個屬性-寬度、線的樣式、顏色,如果寬度設定了很多px,那麼就可以給邊框設定很多顏色,讓邊框顯示出漸變的效果,不過設定邊框不同顏色時只能通過border-bottom-colors,border-top-colors,border-left-colors,border-right-colors-上邊框 下邊框 左邊框 右邊框這樣逐個設定。

如:border: 8px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

這個樣式只能被火狐3.0以上識別,別的瀏覽器顯示不出來

2.border-image(邊框)

這個樣式可以給邊框新增,讓邊框的樣子更花哨,不過要設定邊框的寬度,不然看不出來

如:border-image:url(img/border.png) 30 30 round( round表示平鋪)(平鋪之後的邊框是大小不變,重複複製鋪滿整個邊框)

border-image:url(img/border.png) 30 30 stretch;(stretch表示拉伸)(拉伸之後的邊框是中部被強行拉伸變形鋪滿整個邊框,上下左右四個角屬於盲區,這個區域的沒有任何變化)

屬性還有個repeat--重複,感覺和round沒什麼區別額

3.border-radius(邊框弧度)

可以把邊框四個直角變的圓滑,甚至可以變成圓形

如:border-radius: 11px;

4.box-shadow(陰影)

可以給有固定寬高的html標籤加陰影

如:box-shadow:5px 2px 6px #000;(數值的含義:陰影水平偏移,陰影垂直偏移,模糊,顏色)(水平偏移和垂直偏移都可以設定負值,陰影的位置就可以在圖形的上方

5 css中的border屬性

zh child 複製 border 簡寫屬性在乙個宣告設定所有的邊框屬性。border 1px solid 000 可拆分為border width 1px 寬度border style solid 樣式 實線 border color 000 顏色 可以看到,寬度 顏色 樣式這個三個屬性的屬性值...

CSS 元素的邊框border屬性

邊框相關屬性 寬度 border width 可以使用thin,medium,thick等文字值,也可以使用除百分比和負數之外 的任何絕對值。樣式 border style 有none 無邊框 hidden 隱藏邊框 dotted 點線邊框 dashed 虛線邊框 solid 實線邊框 double...

border和css的背景屬性

1 background color red 2 background image url 背景圖預設顯示狀態 a 當背景圖小於容器尺寸 平鋪 b 當背景圖等於容器尺寸 一張 c 當背景圖大於容器尺寸 只顯示容器區域 3 控制背景圖是否平鋪以及平鋪狀態 background repeat 屬性值 r...