邊框樣式 背景樣式

1、邊框屬性

屬性說明

border-width

邊框的寬度

border-style

邊框的外觀

border-color

邊框的顏色

border-style：

屬性值說明

none

無樣式hidden

與「none」相同。bug應用於表除外。對於表，hidden用於解決邊框衝突

solid

實線dashed

虛線dotted

點線double

雙線，雙線的寬度等於border-width值

屬性值說明inset

內凹outset

外凸ridge

脊線groove

槽線

雖然border-style屬性值很多，但是大部分我們都用不上。一般情況下，我們用到solid和dashed這兩個屬性值就夠了。

img

border-top;border-bottom;border-left;border-right

border-right-width:1px;

border-right-style:solid;
border-right-color:red;

簡潔寫法：border-right:1px solid red;

背景影象：

屬性說明

background-image

定義背景影象的路徑，這樣才能顯示嘛

background-repeat

定義背景影象顯示方式，例如縱向平鋪、橫向平鋪

background-position

定義背景影象在元素哪個位置

background-attachment

定義背景影象是否隨內容而滾動

1、color和background-color

屬性值說明

no-repeat

表示不平鋪

repeat

預設值，表示在水平方向（x軸）和垂直方向（y軸）同時平鋪

repeat-x

表示在水平方向（x軸）平鋪

repeat-y

表示在垂直方向（y軸）平鋪

4、background-position:12px 24px;

表示背景距離該元素左上角的水平方向位置是12px，垂直方向位置是24px。注意，這兩個取值之間要用空格隔開。

top left;top center;top right;left center;center center;right center;botton left;bottom center;bottom right

5、background-attachment:scroll/fixed;

設定樣式 背景和邊框

一 背景 background 背景顏色 background color red 簡寫background red 背景background image url 路徑 簡寫background url 背景平鋪 1 平鋪 瀏覽器預設 2 不平鋪 background repeat no repea...

與背景和邊框相關樣式

新增屬性 background clip 指定背景的顯示範圍 ff moz background clip，其他 webkit background clip background origin 指定繪製背景影象時起點 ff moz background origin，其他 webkit backg...

CSS非布局樣式背景 邊框

hsla 60,100 50 四個引數 顏色 0 360 飽和度 亮度 透明度 hsl 可以不設透明度 漸變色背景 background webkit linear gradient left,red,green background linear gradient to right,red,gre...