2019-04-15
邊框?qū)傩?/h2>
邊框基本屬性
| 屬性名 | 用途 |
|---|---|
| border-style | 邊框的樣式 |
| border-color | 邊框的顏色 |
| border-width | 邊框的寬度 |
| border | 綜合屬性，對邊框?qū)挾?、樣式、顏色進(jìn)行統(tǒng)一設(shè)置。 border: 寬度 樣式 顏色 ; |
| border-top | 綜合設(shè)置上邊框 |
| border-right | 綜合設(shè)置右邊框 |
| border-bottom | 綜合設(shè)置下邊框 |
| border-left | 綜合設(shè)置左邊框 |
border-style的取值
| 參數(shù)名 | 含義 |
|---|---|
| none | 無樣式 |
| solid | 實(shí)線 |
| outset | 外凸 |
| groove | 槽線 |
| dotted | 點(diǎn)劃線 |
| dashed | 虛線 |
| inset | 內(nèi)凹 |
| ridge | 脊線 |
| double | 雙線 |
可以按照top-right-bottom-left的順序設(shè)置元素各邊框的樣式
border-color:red green blue orange;四個邊四種顏色
border-color:red green blue orange;上下邊同色，左右邊同色
表格邊框?qū)傩?/h3>
1. border-collapse
設(shè)置表格邊框是否合并為單一邊框。效果與cellspacing相同
| 值 | 描述 |
|---|---|
| separate | 默認(rèn)值。邊框會分開。不會忽略 border-spacing 屬性。 |
| collapse | 邊框合并為單一邊框。忽略 border-spacing 和 empty-cells 屬性。 |
2. border-spacing
border-collapse設(shè)置為separate時有效。指定單元格之間的距離。兩個長度值中第一個是水平間隔，第二個是垂直間隔。
| 值 | 描述 |
|---|---|
| length length | 規(guī)定相鄰單元格邊框之間的距離。使用 px、cm 等單位。不允許使用負(fù)值。 如果定義一個 length 參數(shù)，代表的是水平和垂直間距。 如果定義兩個 length 參數(shù)，則第一個設(shè)置水平間距，第二個設(shè)置垂直間距。 |
3. 圓角邊框(border-radius)
border-radius:150px;
角度達(dá)到寬高的50%呈現(xiàn)圓形，繼續(xù)增大形狀不會再有變化。
border-radius屬性可包含兩個參數(shù)值：
第一個值表示圓角的水平半徑，第二個值表示圓角的垂直半徑，兩個參數(shù)通過斜線分隔。
可以為元素的4個角設(shè)置不同弧度：
border-top-left-radius:30px; /*左上角*/
border-top-right-radius:40px; /*右上角*/
border-bottom-left-radius:50px; /*左下角*/
border-bottom-right-radius:60px; /*右下角*/
4.邊框陰影(box-shadow)
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負(fù)值。 |
| v-shadow | 必需。垂直陰影的位置。允許負(fù)值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset | 可選。將外部陰影 (outset) 改為內(nèi)部陰影。 |
各參數(shù)的組合順序：box-shadow: h-shadow v-shadow blur spread color inset
背景屬性
背景基本屬性
| 值 | 描述 |
|---|---|
| background-color | 背景顏色。 |
| background-image | 背景圖像，默認(rèn)平鋪，url('URL')格式 |
| background-repeat | 定義了圖像的平鋪模式。設(shè)置是否及如何重復(fù)背景圖像。 |
| background-position | 規(guī)定背景圖像的起始位置。 |
| background-attachment | 規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。 |
| background | 綜合屬性 |
background-repeat
| 值 | 描述 |
|---|---|
| repeat | 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。 |
| repeat-x | 背景圖像將在水平方向重復(fù)。 |
| repeat-y | 背景圖像將在垂直方向重復(fù)。 |
| no-repeat | 背景圖像將僅顯示一次。 |
background-position
| 值 | 描述 |
|---|---|
| top<br /> left<br /> right<br /> bottom<br /> center | 配合使用<br /> 例：top right（右上角）<br /> 如果只有一個關(guān)鍵詞，那么第二個默認(rèn)為center<br /> 例：top（左右居中靠上） |
| x% y% | 0% 0%是左上角，100% 100%右上角，如果只寫一個另一個則為50% |
| xpos ypos | 像素值 |
background-attachment
| 值 | 描述 |
|---|---|
| scroll | 默認(rèn)值。背景圖像會隨著頁面其余部分的滾動而移動。 |
| fixed | 當(dāng)頁面的其余部分滾動時，背景圖像不會移動。 |
background
可以按順序綜合設(shè)置如下屬性（某個屬性值可以缺省)：
background-color
background-image
background-repeat
background-attachment
background-position
定義多背景圖像
css3可以在一個元素里顯示多個背景圖像。圖像根據(jù)瀏覽器中疊放順序從上往下指定，第一個圖像放在最上面，最后指定的圖像放在最下面。
background:
url(images/001.jpg) no-repeat,
url(images/002.jpg) no-repeat 100px 100px,
url(images/003.jpg) no-repeat 200px 200px;
背景尺寸屬性
background-size主要參數(shù)
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖片高度和寬度。第一個值設(shè)置寬度，第二個值設(shè)置的高度。如果只給出一個值，第二個是設(shè)置為"atuo(自動)" |
| percentage | 將計(jì)算相對于背景定位區(qū)域的百分比。第一個值設(shè)置寬度，第二個值設(shè)置的高度。如果只給出一個值，第二個是設(shè)置為"auto(自動)" |
| cover | 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。 |
| contain | 此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。 |
透明度(opacity)
接受小于等于1的小數(shù)作為參數(shù)，默認(rèn)值為1（不透明）。
