CSS

CSS

css的三種引入方式:css

1.行間式:
--<div style=''></div>

-- 在標籤頭部的style屬性內html

--屬性值知足的是css語法css3

--屬性值用key:value形式賦值,value具備單位chrome

--屬性之間用;隔開api

2.內聯式:瀏覽器

--在style標籤內(style標籤一半做爲head的子標籤)框架

--屬性值知足的是css語法ssh

--屬性值用key:value形式賦值,value具備單位ide

--屬性之間用;隔開,通常獨佔一行函數

--格式:選擇器{樣式塊}

style塊通常放在最下面,這樣能對下面的全部的樣式進行樣式定製

3.外聯式:

--在外部css文件中

--屬性值知足的是css語法

--屬性值用key:value形式賦值,value具備單位

--屬性之間用;隔開,通常獨佔一行

--格式:選擇器{樣式塊}

--將html與css文件創建聯繫;html經過link標籤連接外部css

<link href=''></link>
4.三種引入方式的優先級:

三種方式間沒有優先級:
--三種方式協同佈局

--不重複的屬性必定爲惟一位置的惟一值

--重複的屬性採用覆蓋賦值,保留最後位置的屬性值

--行間式必定是邏輯上最後的被解析的位置(js正常操做的就是行間式)
--!import 會影響優先級

長度

  • px:像素,屏幕上顯示的最小單位,用於網頁設計,直觀方便
  • mm:毫米
  • cm:釐米
  • in:英寸
  • pt:點,1pt=1/12in,用於印刷業
  • em:至關長度,一般1em=16px,應用於流式佈局
  • vw: 50vw; 50% view width 流式佈局

顏色

  • rgb(0,0,0) 範圍是0-255
  • rgba(0,0,0,0) 最後一位爲透明度

文本樣式:

字體屬性:(font)

大小 {font-size: x-large;}(特大) xx-small;(極小) 通常中文用不到,只要用數值就能夠,單位:PX、PD

樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)

行高 {line-height: normal;}(正常) 單位:PX、PD、EM

粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)

變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)

大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

經常使用字體: (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性: (background)

色彩 {background-color: #FFFFFF;}

圖片 {background-image: url();}

重複 {background-repeat: no-repeat;}

滾動 {background-attachment: fixed;}(固定) scroll;(滾動)

位置 {background-position: left;}(水平) top(垂直);

簡寫方法 {background:#000 url(..) repeat fixed left top;} /簡寫·這個在閱讀代碼中常常出現,要認真的研究/

區塊屬性: (Block) /這個屬性第一次認識,要多多研究/

字間距 {letter-spacing: normal;} 數值 /這個屬性彷佛有用,多實踐下/

對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進 {text-indent: 數值px;}

垂直對齊 {vertical-align: baseline;}(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數值

空格white-space: pre;(保留) nowrap;(不換行)

顯示 {display:block;}(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題) /display 屬性的瞭解很模糊/

方框屬性: (Box)

width:; height:; float:; clear:both; margin:; padding:; 順序:上右下左

邊框屬性: (Border)

border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;

border-width:; 邊框寬度

border-color:#;

簡寫方法border:width style color; /簡寫/

列表屬性: (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性: (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)

一 CSS文字屬性:

color : #999999; /文字顏色/

font-family : 宋體,sans-serif; /文字字體/

font-size : 9pt; /文字大小/

font-style:itelic; /文字斜體/

font-variant:small-caps; /小字體/

letter-spacing : 1pt; /字間距離/

line-height : 200%; /設置行高/

font-weight:bold; /文字粗體/

vertical-align:sub; /下標字/

vertical-align:super; /上標字/

text-decoration:line-through; /加刪除線/

text-decoration: overline; /加頂線/

text-decoration:underline; /加下劃線/

text-decoration:none; /刪除連接下劃線/

text-transform : capitalize; /首字大寫/

text-transform : uppercase; /英文大寫/

text-transform : lowercase; /英文小寫/

text-align:right; /文字右對齊/

text-align:left; /文字左對齊/

text-align:center; /文字居中對齊/

text-align:justify; /文字分散對齊/

vertical-align屬性

vertical-align:top; /垂直向上對齊/

vertical-align:bottom; /垂直向下對齊/

vertical-align:middle; /垂直居中對齊/

vertical-align:text-top; /文字垂直向上對齊/

vertical-align:text-bottom; /文字垂直向下對齊/

2、CSS邊框空白

padding-top:10px; /上邊框留空白/

padding-right:10px; /右邊框留空白/

padding-bottom:10px; /下邊框留空白/

padding-left:10px; /*左邊框留空白

3、CSS符號屬性:

list-style-type:none; /不編號/

list-style-type:decimal; /阿拉伯數字/

list-style-type:lower-roman; /小寫羅馬數字/

list-style-type:upper-roman; /大寫羅馬數字/

list-style-type:lower-alpha; /小寫英文字母/

list-style-type:upper-alpha; /大寫英文字母/

list-style-type:disc; /實心圓形符號/

list-style-type:circle; /空心圓形符號/

list-style-type:square; /實心方形符號/

list-style-image:url(/dot.gif); /圖片式符號/

list-style-position: outside; /凸排/

list-style-position:inside; /縮進/

4、CSS背景樣式:

background-color:#F5E2EC; /背景顏色/

background:transparent; /透視背景/

background-image : url(/image/bg.gif); /背景圖片/

background-attachment : fixed; /浮水印固定背景/

background-repeat : repeat; /重複排列-網頁默認/

background-repeat : no-repeat; /不重複排列/

background-repeat : repeat-x; /在x軸重複排列/

background-repeat : repeat-y; /在y軸重複排列/

指定背景位置

background-position : 90% 90%; /背景圖片x與y軸的位置/

background-position : top; /向上對齊/

background-position : buttom; /向下對齊/

background-position : left; /向左對齊/

background-position : right; /向右對齊/

background-position : center; /居中對齊/

5、CSS鏈接屬性:

a /全部超連接/

a:link /超連接文字格式/

a:visited /瀏覽過的連接文字格式/

a:active /按下連接的格式/

a:hover /鼠標轉到連接/

鼠標光標樣式:

連接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}

6、CSS框線一覽表:

border-top : 1px solid #6699cc; /上框線/

border-bottom : 1px solid #6699cc; /下框線/

border-left : 1px solid #6699cc; /左框線/

border-right : 1px solid #6699cc; /右框線/

以上是建議書寫方式,但也可使用常規的方式 以下:

border-top-color : #369 /設置上框線top顏色/

border-top-width :1px /設置上框線top寬度/

border-top-style : solid/設置上框線top樣式/

其餘框線樣式

solid /實線框/

dotted /虛線框/

double /雙線框/

groove /立體內凸框/

ridge /立體浮雕框/

inset /凹框/

outset /凸框/

7、CSS表單運用:

文字方塊

按鈕

複選框

選擇鈕

多行文字方塊

下拉式菜單 選項1選項2

8、CSS邊界樣式:

margin-top:10px; /上邊界/

margin-right:10px; /右邊界值/

margin-bottom:10px; /下邊界值/

margin-left:10px; /左邊界值/

CSS 屬性: 字體樣式(Font Style)

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風格 {font-style:inherit|italic|normal|oblique}

5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數值|inherit|normal;}

9 字 間 距 {letter-spacing:數值|inherit|normal}

10 單詞間距 {word-spacing:數值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

1 行 間 距 {line-height:數值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

1 背景顏色 {background-color:數值}

2 背景圖片 {background-image: url(URL)|none}

3 背景重複 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重複|背景附件|背景位置}

框架樣式(Box Style)

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補  白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值: thin|medium|thick|數值

4 邊框顏色 {border-color:數值 數值 數值 數值}  數值:分別表明top、right、bottom、left顏色值

5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊  框 {border:border-width border-style color}

上 邊 框 {border-top:border-top-width border-style color}

右 邊 框 {border-right:border-right-width border-style color}

下 邊 框 {border-bottom:border-bottom-width border-style color}

左 邊 框 {border-left:border-left-width border-style color}

7 寬度 {width:長度|百分比| auto}

8 高度 {height:數值|auto}

9 漂浮 {float:left|right|none}

10 清除 {clear:none|left|right|both}

分類列表

1 控制顯示 {display:none|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 圖形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

css佈局九決,學css再也不難簡單的幾句CCS佈局口訣,就能夠寫出精簡,標準的樣式。

1、IE邊框若顯若無,須注意,定是高度設置已忘記;
2、浮動產生有緣故,若要父層包含住,緊跟浮動要清除,容器天然顯其中;
3、三像素文本慢移沒必要慌,高度設置幫你忙;
4、兼容各個瀏覽須注意,默認設置行高多是隱患;
5、獨立清除浮動須銘記,行高設無,高設零,設計效果兼瀏覽;
6、學佈局須思路,路隨佈局原理天然直,輕鬆駕馭html,流水佈局少hack,代碼清爽,兼容好,友好引擎喜歡迎。
7、全部標籤皆有源,只是默認各不一樣,span是無極,無極生兩儀—內聯和塊級,img較特殊,但也遵法理,其餘只是改造各不一樣,一個*號全歸原,層疊樣式理須多練習,萬物皆規律。
8、圖片連接排版須當心,圖片連接文字連接若對齊,padding和vertical-align:middle要設定,雖差微細倒無妨。

css選擇器

1、經常使用的選擇器

元素選擇器
做用:經過元素選擇器能夠選則頁面中的全部指定元素
語法:標籤名 { }
id選擇器
做用:經過元素的id屬性值選中惟一的一個元素
語法:#id屬性值 { }
類選擇器
做用:經過元素的class屬性值選中一組元素
語法:.class屬性值{ }
並集選擇器
做用:經過選擇器分組能夠同時選中多個選擇器對應的元素
語法:選擇器1,選擇器2,選擇器N{ }
交集選擇器
做用:能夠選中同時知足多個選擇器的元素
語法:選擇器1選擇器2選擇器N{ }
通配選擇器
做用:他能夠用來選中頁面中的全部的元素
語法:*{ }
2、子元素和後代元素選擇器
元素之間的關係
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或間接包含後代元素的元素,父元素也是祖先元素
後代元素:直接或間接被祖先元素包含的元素,子元素也是後代元素
兄弟元素:擁有相同父元素的元素叫作兄弟元素
後代元素選擇器
做用:選中指定元素的指定後代元素
語法:祖先元素 後代元素{}
子元素選擇器
做用:選中指定父元素的指定子元素
語法:父元素 > 子元素
3、僞類選擇器
僞類專門用來表示元素的一種的特殊的狀態。
好比:訪問過的超連接,好比普通的超連接,好比獲取焦點的文本框。
當咱們須要爲處在這些特殊狀態的元素設置樣式時,就可使用僞類

舉例

:link
  做用:表示普通的連接(沒訪問過的連接)

  :visited
  做用:表示訪問過的連接

  :hover
  做用:表示鼠標移入的狀態

  :active
  做用:表示的是超連接被點擊的狀態

  :focus
  做用:表示文本框獲取焦點

ps:  :hover和:active也能夠爲其餘元素設置(ie6不支持)
4、僞元素選擇器

概述:使用僞元素來表示元素中的一些特殊的位置
舉例

p:first-letter
做用:選擇p中第一個字符

p:first-line
做用:選擇p中的第一行

:before
做用:表示元素最前邊的部分,  通常before都須要結合content這個樣式一塊兒使用,經過content能夠向before或after的位置添加一些內容

:after
表示元素的最後邊的部分
5、屬性選擇器

概述:能夠根據元素中的屬性或屬性值來選取指定元素
示例

[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取含有指定屬性值的元素
[屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
[屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
[屬性名*="屬性值"] 選取屬性值以包含指定內容的元素
6、子元素、兄弟元素選擇器以及否認僞類
子元素選擇器舉例
:first-child 能夠選中第一個子元素
:last-child 能夠選中最後一個子元素
:nth-child(XXX) 能夠選中任意位置的子元素,該選擇器後邊能夠指定一個參數,指定要選中第幾個子元素,even 表示偶數位置的子元素,odd 表示奇數位置的子元素。

:first-of-type、:last-of-type、:nth-of-type
和:first-child這些很是的相似,只不過child,是在全部的子元素中排列,而type,是在當前類型的子元素中排列
兄弟選擇器舉例:
前一個元素 + 後一個元素
做用:能夠選中一個元素後緊挨着的指定的兄弟元素

前一個元素 ~ 後邊全部元素
做用:選中後邊的全部兄弟元素
否認僞類舉例

做用:能夠從已選中的元素中剔除出某些元素

7、選擇器的優先級別

概述
當使用不一樣的選擇器,選中同一個元素時而且設置相同的樣式時,這時樣式之間產生了衝突,最終到底採用哪一個選擇器定義的樣式,由選擇器的優先級(權重)決定,優先級高的優先顯示。

規則

內聯樣式 , 優先級  1000
id選擇器,  優先級   100
類和僞類,  優先級   10
元素選擇器,優先級 1 
通配* ,    優先級 0
繼承的樣式,沒有優先級

其餘狀況:

當選擇器中包含多種選擇器時,須要將多種選擇器的優先級相加而後在比較,可是注意,選擇器優先級計算不會超過他的最大的數量級,若是選擇器的優先級同樣,則使用靠後的樣式。
並集選擇器的優先級是單獨計算 div , p , #p1 , .hello{ }。

能夠在樣式的最後,添加一個!important,則此時該樣式將會得到一個最高的優先級,將會優先於全部的樣式顯示甚至超過內聯樣式,可是在開發中儘可能避免使用!important。

盒子模型

在使用CSS進行網頁佈局時,咱們必定離不開的一個東西————盒子模型。盒子模型,顧名思義,盒子就是用來裝東西的,它裝的東西就是HTML元素的內容。或者說,每個可見的 HTML 元素都是一個盒子,下面所說的盒子都等同於 HTML 元素。這裏盒子與 中的盒子又有點不一樣,這裏的盒子是二維的。

盒子的組成

一個盒子由外到內能夠分紅四個部分:margin(外邊距)、border(邊框)、padding(內邊距)、content(內容)。會發現margin、border、padding是CSS屬性,所以能夠經過這三個屬性來控制盒子的這三個部分。而content則是HTML元素的內容。

盒子的大小

盒子的大小指的是盒子的寬度和高度。大多數初學者容易將寬度和高度誤解爲width和height屬性,然而默認狀況下width和height屬性只是設置content(內容)部分的寬和高。盒子真正的寬和高按下面公式計算:

盒子的寬度 = 內容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距

盒子的高度 = 內容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距

爲了顯得專業一點,咱們還能夠用帶屬性的公式表示:

盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面說到的是 默認 狀況下的計算方法,另一種狀況下,width和height屬性設置的就是盒子的寬度和高度。盒子的寬度和高度的計算方式由box-sizing屬性控制。

box-sizing屬性值

content-box:默認值,width和height屬性分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距、邊框、外邊距。

border-box:爲元素設定的width和height屬性決定了元素的邊框盒。就是說,爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去外邊距、邊框和內邊距才能獲得內容的寬度和高度。

inherit:規定應從父元素繼承box-sizing屬性的值。

盒子成分分析

margin
margin,盒子的外邊框,他是徹底透明的,開發者只能夠設置它的邊距。

margin包含了上下左右四條邊,開發者能夠單獨設置每一條邊的邊距。

margin-top:上邊距
margin-buttom:下邊距
margin-left:左邊距
margin-right:右邊距
開發者也能夠直接使用簡寫屬性margin同時設置四條邊的寬度。

margin示例1
/*margin屬性後只跟一個值,同時設置四條邊的邊距相等*/
margin: 10px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin示例2
/*margin屬性後跟兩個值,第一個值設置上下邊距,第二個是設置左右邊距*/
margin: 10px 20px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
margin示例3
/*margin屬性後跟三個值,第一個值設置上邊距,第二個是設置左右邊距,第三個值設置下邊距*/
margin: 10px 20px 30px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
margin示例4

/margin屬性後跟四個值,第一個值設置上邊距,第二個是設置右邊距,第三個值設置下邊距,第四個值設置左邊距/

margin: 10px 20px 30px 40px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
padding

padding表示盒子的內邊距(填充)。與外邊距不一樣,padding不是隻能徹底透明的,能夠設置背景顏色和圖片。

與margin相似,padding包含了上下左右四條邊,開發者能夠單獨設置每一條邊的邊距。

padding-top:上部填充
padding-bottom:下部填充
padding-left:左部填充
padding-right:右部填充
開發者也能夠直接使用簡寫屬性padding同時設置四條邊的寬度。這一部分的用法與上面的margin相似,能夠參考margin的四個實例。

border
border表示盒子的邊界,它能夠設置成可見的,樣式多樣的。

最基本的,border像margin和padding同樣能夠分別對每一條邊進行設置,也可使用簡寫屬性border進行設置。

border-top:上邊界
border-bottom:下邊界
border-left:左邊界
border-right:右邊界

border實例1
/*使用簡寫屬性,同時設置四條邊界,四條邊界的寬度、樣式和顏色都是同樣的*/
border: 2px solid green;
/*下面的樣式與上面的樣式等價*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

除了能夠單獨對每一條邊進行樣式設置以外,還能夠分別對邊界的寬度、樣式和顏色進行設置(下面的屬性會對四條邊進行設置),一樣可使用簡寫屬性border進行設置。

border-width:邊界寬度
border-style:邊界樣式
border-color:邊界顏色
border-sytle屬性可取值:

none:定義無邊框。
hidden:與 「none」 相同。不過應用於表時除外,對於表,hidden 用於解決邊框衝突。
dotted:定義點狀邊框。在大多數瀏覽器中呈現爲實線。
dashed:定義虛線。在大多數瀏覽器中呈現爲實線。
solid:定義實線。
double:定義雙線。雙線的寬度等於 border-width 的值。
groove:定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge:定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset:定義 3D inset 邊框。其效果取決於 border-color 的值。
outset:定義 3D outset 邊框。其效果取決於 border-color 的值。
inherit:規定應該從父元素繼承邊框樣式。

border實例2
/*使用簡寫屬性設置寬度、樣式和顏色,同時做用於四條邊*/
border: 2px dotted green;
/*下面的樣式與上面的樣式等價*/
border-width: 2px;
border-style: dotted;
border-color: green;
這還不算完,開發者還能夠對單獨一條邊界單獨設置寬度、樣式或顏色。以上兩組屬性均可以做爲下面屬性的簡寫屬性。
border-top-width:上邊界寬度
border-top-style:上邊界樣式
border-top-color:上邊界顏色
border-bottom-width:下邊界寬度
border-bottom-style:下邊界樣式
border-bottom-color:下邊界顏色
border-left-width:左邊界寬度
border-left-style:左邊界樣式
border-left-color:左邊界顏色
border-right-width:右邊界寬度
border-right-style:右邊界樣式
border-right-color:右邊界顏色
border實例3
/*使用簡寫屬性設置寬度、樣式和顏色,同時做用於四條邊*/
border: 2px dotted green;
/*下面的樣式與上面簡寫樣式等價*/
border-width: 2px;
border-style: dotted;
border-color: green;
/*下面的樣式與上面簡寫樣式等價*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
/*下面樣式又與上面三個樣式的任意一個樣式等價*/
border-top-width: 2px;
border-top-style: dotted;
border-top-color: green;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: green;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: green;

上面的屬性是對各邊的寬度、樣式和顏色進行設置,下面一些有趣的屬性可讓盒子變得更加地有創意、更加好看。

首先,瞭解一下 邊界半徑 ,也就是圓角。邊界半徑由屬性border-radius進行控制,這是一個簡寫屬性,像上面提到過的margin、padding等同樣,能夠有一個、兩個、三個或四個值進行設置。一樣也能夠對盒子的每個角的半徑進行單獨設置。

border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-left-radius:右下角
邊界半徑可使用 px、em 等長度單位,也可使用百分數。

border-radius值的個數以及每一個值對應控制的位置:

一個值:設置四個角有相同的邊界半徑;
兩個值:第一個值設置左上角和右下角,第二個值設置右上角和左下角;
三個值:第一個值設置左上角,第二個值設置右上角和左下角,第三個值設置右下角;
四個值:第一個值設置左上角,第二個值設置右上角,第三個值設置右下角,第四個之設置左下角。

border實例4
/*以簡寫屬性的三個值爲例*/
border-radius: 10px 20px 30px;
/*下面樣式與上面簡寫屬性樣式等價*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

開發者還能夠設置x半徑和y半徑的不一樣,建立橢圓形角。x半徑表示水平半徑,y半徑表示垂直半徑。在border-radius屬性中,x半徑和y半徑用「/」分隔,在border-top-left等四個屬性中,傳入兩個值,第一個值表示x半徑,第二個值表示y半徑。

border實例5
/*簡寫屬性的x半徑設置兩個值,y半徑設置三個值*/
border-radius: 30px 20px / 20px 10px 30px;
/*在簡寫屬性中設置角度時,值與盒子角的映射是x和y分開的,按照上面提到的規則進行映射*/
/*x半徑兩個值,第一個值控制左上角和右下角,第二個值控制右上角和左下角*/
/*y半徑三個值,第一個值控制左上角,第二個值控制右上角和左下角,第三個值控制右下角*/
border-top-left-radius: 30px 20px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 20px 10px;
圖形邊界

圖形邊界是用圖形來做爲盒子的邊界border。我將這一部分單獨做爲一個小節的緣由是,圖形邊界border-image是CSS3新增的內容,實現起來比較複雜,並且只有一些版本比較新的主流瀏覽器支持。

在這隻圖形邊界以前,須要先設置一個邊界,讓圖形有顯示的空間,同時也可讓不支持圖形邊界的瀏覽器顯示這個預先設定好的非圖形邊界。而後,還須要將背景顏色和背景圖片限制在填充和內容以內(默認狀況下,背景顏色和背景圖片做用在border,padding和content,邊界的樣式浮在背景之上),這須要用到background-clip屬性。

background-clip屬性的值:

border-box:背景延伸到邊框外沿(可是在邊框之下)。
padding-box:邊框下面沒有背景,即背景延伸到內邊距外沿。
content-box:背景裁剪到內容區 (content) 外沿。
text:背景被裁剪爲文字的前景色(只有chrome支持)。

在圖形邊界中用到如下屬性:

border-image:設置圖形邊界,簡寫屬性
border-image-source:圖形的來源(路徑),能夠接收一個URL函數或一個漸變做爲值。
border-image-slice:圖形的切片大小
border-image-width:圖形邊界的寬度
border-image-repeat:定義圖片如何填充邊框
border-image-outset:定義邊界內部和內邊距之間的額外空間的大小
可能有不少小夥伴看不懂,不要緊,下面對以上屬性進行詳細的解釋。

border-image-source

從圖形的來源開始提及。圖形的來源能夠是一個圖片或者漸變顏色。設置圖片用URL(path)函數,設置漸變顏色用linear-gradient(to top|bottom|left|right, beginColor1, endColor2)函數。還有一個默認值none,當使用默認值的時候,或者若是圖像沒法顯示,則使用邊框樣式border-style。有了圖形還不行,還須要對圖形進行切割,纔可以應用到邊界上。

border-image-slice

該屬性將圖片切割成9個區域,包括四個角,四條邊以及中心區域。四條切片線,從它們各自的側面設置給定距離,控制區域的大小。

上圖中,四條切片線將圖片切成了9份。其中一、二、三、4爲四個角區域,將會對應應用到盒子邊界的四個角;五、六、七、8爲四個邊界區域,將會對應應用到盒子邊界的四條邊;區域9爲中心區域,默認狀況下會被丟棄,但若是設置了fill關鍵字(能夠被設置在屬性的任何一個位置(前面、後面或者兩個值之間)),則會將其做爲背景圖形。

border-image-slice屬性的值能夠是數字或百分數,還有關鍵字fill。值的個數能夠是1-4個,其規則與margin、padding等屬性同樣。

border-image-repeat
該屬性設置圖片在邊框的填充方式。值的個數能夠是一個或兩個,一個值時設置全部的邊框,兩個值時分別設置水平與垂直的邊框。它具備下面的值:

stretch:拉伸圖片以填充邊框。
repeat:平鋪圖片以填充邊框。
round:平鋪圖像。當不能整數次平鋪時,根據狀況放大或縮小圖像。
space:平鋪圖像 。當不能整數次平鋪時,會用空白間隙填充在圖像周圍(不會放大或縮小圖像)
inherit:繼承父級元素的計算值。

border-image-width

設置圖形邊界的寬度。當border-image-width的值大於border-width時,圖形不會向margin方向擴展,而是會向padding和content方向擴展,覆蓋。

border-image-width屬性的值能夠是長度或百分數,以及auto。值的個數爲1-4個,其規則與margin、padding等屬性的規則一致。

border-image-outset

該屬性設置邊框圖像可超出邊框盒的大小。講的通俗一點,就是在圖像和padding之間增長一些填充,將邊框圖像往外擠。它的值能夠是長度或百分數,值的個數爲1-4個,其規則與margin、padding等屬性的規則一致。

border-image

該屬性是一個簡寫屬性,他能夠設置上面提到的五個屬性,其基本語法以下:

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
1
關於「||」、「?」等符號的意義能夠查看CSS屬性值定義語法。

border-image實例
background:blue;
background-clip: padding-box;
border: 20px dotted green;
border-image:url(https://mdn.mozillademos.org/files/13060/border-image.png) 40 / 10px / 20px round;
/*其中border-image屬性能夠用如下一組屬性代替*/
border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
border-image-slice: 40;
border-image-width: 10px;
border-image-outset: 20px;
border-image-repeat: round;
盒子陰影
在盒子的組成成分以外,CSS3給盒子添加了陰影。盒子的陰影由box-shadow屬性控制,陰影的輪廓與盒子邊界border的輪廓同樣。該屬性的正規語法以下:
none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

inset:默認陰影在邊框外。使用 inset 後,陰影在邊框內(即便是透明邊框),背景之上內容之下。
:這是頭兩個長度值,用來設置陰影偏移量,相對於border外邊線開始計算。 設置水平偏移量,若是是負值則陰影位於元素左邊。設置垂直偏移量,若是是負值則陰影位於元素上面。若是二者都是0,那麼陰影位於元素後面。這時若是設置了 或 則有模糊效果。
:這是第三個長度值。值越大,模糊面積越大,陰影就越大越淡。 不能爲負值。默認爲0,此時陰影邊緣銳利。
:這是第四個長度值。取正值時,陰影擴大;取負值時,陰影收縮。默認爲0,此時陰影與元素一樣大。
:若是沒有指定,則由瀏覽器決定——一般是color的值,不過目前Safari取透明。
設置多個陰影時,使用逗號將每一個陰影的值隔開。前面的陰影會在後面陰影之上,若是上層有透明度較低的部分,會與下層的顏色重疊,合成新顏色。

border-shadow實例
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* 多個陰影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;

/*全局關鍵字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
相關文章
相關標籤/搜索