背景樣式
常用的背景樣式
- 背景色：background-color
background-color: gray;
background-color: #808080;
background-color: rgb(128,128,128);
- 背景圖像：background-image
body{background-image: url("images/bg.jpg");}
- 背景圖片重復(fù)：background-repeat
| 值 | 描述 |
|---|---|
| repeat | 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù) |
| repeat-x | 背景圖像將在水平方向重復(fù) |
| repeat-y | 背景圖像將在垂直方向重復(fù) |
| no-repeat | 背景圖像將僅顯示一次 |
| inherit | 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置 |
- 背景圖片定位：background-position
background-position屬性值：
①使用關(guān)鍵字：background-position:center left
②使用百分?jǐn)?shù)值：background-position: 50% 50%
③使用長度值：background-position:300px 100px
/*背景樣式綜合使用*/
background: #00ff00 url(image/bg.jpg) no-repeat center;
- 背景圖片固定：background-attachment
background-attachment屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)衩匣。
- scroll：默認(rèn)值孔厉。背景圖像會(huì)隨著頁面的滾動(dòng)而移動(dòng)逆皮。
- fixed：當(dāng)頁面的其余部分滾動(dòng)時(shí)蛋济，背景圖像不會(huì)移動(dòng)甜无。
background-size
- 規(guī)定背景圖片的尺寸
- 語法：
background-size: length| percentage| cover| contain;
| 值 | 描述 |
|---|---|
| length | 以浮點(diǎn)數(shù)字和單位組成的長度值來設(shè)置背景圖像的寬度和高度撒璧，如果只設(shè)置第一個(gè)值群扶，則第二個(gè)值會(huì)被設(shè)置為"auto" |
| percentage | 以父元素的百分比來設(shè)置背景圖像的寬度和高度及刻，如果只設(shè)置第一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為"auto" |
| cover | 保持背景圖像本身寬高比例竞阐，將圖片縮放到正好完全覆蓋所定義背景的區(qū)域 |
| contain | 保持背景圖像本身寬高比例缴饭，將圖片縮放到寬度或高度正好適應(yīng)所定義背景的區(qū)域 |
cover和contain
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>背景</title>
<style type="text/css">
div{width: 700px;height: 400px;border: 2px solid plum;background-repeat: no-repeat;
background-image: url(img/design.jpg);background-size: cover;}
</style>
</head>
<body>
<div>圖片尺寸</div>
</body>
</html>
background-origin
- 規(guī)定背景圖片的定位區(qū)域（background-position的參考位置）
- 語法：
background-origin: border-box | padding-box | content-box;
默認(rèn)是padding-box
background-origin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{border:10px solid black;padding:35px;background-image:url(img/smiley.gif);
background-repeat:no-repeat;background-position:0px 0px;}
#div1{background-origin: padding-box;}
#div2{background-origin:content-box;}
</style>
</head>
<body>
<p>背景圖像邊界框的相對(duì)位置：</p>
<div id="div1">
CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果骆莹。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上颗搂。CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果幕垦。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上丢氢。
</div>
<p>背景圖像的相對(duì)位置的內(nèi)容框：</p>
<div id="div2">
CSS 允許應(yīng)用純色作為背景傅联，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上疚察。CSS 允許應(yīng)用純色作為背景蒸走，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上貌嫡。
</div>
</body>
</html>
background-clip
- 規(guī)定背景的繪制區(qū)域（決定背景在哪些區(qū)域顯示）比驻。
- 語法：background-clip: border-box| padding-box| content-box;
| 值 | 描述 |
|---|---|
| border-box | 從邊框區(qū)域向外裁剪背景 |
| padding-box | 從補(bǔ)白區(qū)域向外裁剪背景 |
| content-box | 從內(nèi)容區(qū)域向外裁剪背景 |
background-clip與background-origin
-
background-clip：border| padding| content指定背景在哪些區(qū)域可以顯示，但與背景開始繪制的位置無關(guān)岛抄。背景的繪制的位置可以出現(xiàn)在不顯示背景的區(qū)域别惦，這時(shí)就相當(dāng)于背景圖片被不顯示背景的區(qū)域裁剪了一部分。 -
background-origin：padding| border| content指定背景從哪個(gè)區(qū)域(邊框夫椭、補(bǔ)白或內(nèi)容)開始繪制掸掸。可以用此屬性在邊框上繪制背景益楼，但邊框上的背景顯不顯示出來就要由background-clip來決定了猾漫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#example1 {
width: 800px;
height: 450px;
border: 20px dotted black;
padding: 50px;
background-image: url(img/girl.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-clip: padding-box;/*padding-box以外的都要剪輯掉*/
background-origin: border-box;/*從border-box開始進(jìn)行剪輯*/
}
</style>s
</head>
<body>
<div id="example1"></div>
</body>
</html>
邊框樣式
常用的邊框樣式
border
設(shè)置邊框?qū)挾龋?code>border-width 寬度值。示例：
border-width:1px;設(shè)置邊框顏色：
border-color顏色感凤。示例：border-color:#cccccc;設(shè)置邊框樣式：
border-style樣式關(guān)鍵字悯周。示例：border-style: solid;
邊框線類型
- 邊框復(fù)合樣式：
border: width / style / color示例：border: 3px dotted#ff9900
border-radius
圓角邊框——border-radius 屬性。
- 語法
border-radius: 1-4 length | %;
-
border-radius屬性可包含兩個(gè)參數(shù)值陪竿，第一個(gè)值表示圓角的水平半徑禽翼，第二個(gè)值表示圓角的垂直半徑，兩個(gè)參數(shù)值通過斜線分隔族跛。如果僅包含一個(gè)參數(shù)值闰挡，表示兩個(gè)值相同，即1/4圓角礁哄。
| 單位 | 描述 |
|---|---|
| length | 定義圓角的形狀长酗。（圓角半徑） |
| % | 比百分比定義圓角的形狀 |
border-radius
如果要繪制的圓角邊框4個(gè)角的半徑各不相同時(shí)，需按左上角桐绒、右上角夺脾、右下角、左下角的順序設(shè)置每個(gè)方向圓角半徑的值茉继。
-
border-top-left-radius咧叭、border-top-right-radius、border-bottom-right-radius烁竭、border-bottom-left-radius（繪制圓角邊框的四個(gè)角的半徑各不相同時(shí)菲茬，按照上述的順序）
- 如果省略
bottom-right，則與top-left相同。如果省略top-right婉弹，則與top-left相同睬魂。
div{
border-top-left-radius: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 30px;
/*上述的四句代碼等同于：border-radius:0px 10px 20px 30px;*/
}
border-image
圖像邊框——border-image 屬性
- 可以讓元素的長度或?qū)挾忍幱陔S時(shí)變化的邊框統(tǒng)一使用一個(gè)圖像文件進(jìn)行繪制。
- 語法：
border-image: url(圖像文件的路徑) A B C D
ABCD四個(gè)參數(shù)表示瀏覽器自動(dòng)把圖像分隔時(shí)的上邊距镀赌、右邊距汉买、下邊距以及左邊距。
border-image
border-image 屬性是一個(gè)簡寫屬性佩脊，用于設(shè)置以下屬性：
| 值 | 描述 |
|---|---|
| border-image-source | 定義用在邊框的圖片的路徑 |
| border-image-slice | 定義如何裁切背景圖像 |
| border-image-width | 圖片邊框的寬度 |
| border-image-outset | 邊框圖像區(qū)域超出邊框的量 |
| border-image-repeat | 圖像邊框是否應(yīng)平鋪(repeated)蛙粘、鋪滿(rounded)或拉伸(stretched) |
陰影
向框添加一個(gè)或多個(gè)陰影——box-shadow 屬性
語法：box-shadow: h-shadow v-shadow blur spread color inset;
border-shadow
border-shadow
