邊框圖片：
例如：border-image:url("") 27/20px round;
- 參數(shù)1：邊框圖片的路徑
- border-image-source
- 參數(shù)2：切割的尺寸默责，切了四刀态贤，順序?yàn)椋荷嫌蚁伦筇拦Γ瑔挝皇莗x，默認(rèn)荤懂，所以不用帶單位
- border-image-slice
border-image-jugongtu.png
- 參數(shù)3：邊框的寬度燎潮，因?yàn)榇死邮?0蔑滓，所以那27自適應(yīng)顯示在邊框中
- border-image-width
- 參數(shù)4：平鋪的方式：repeat(平鋪)--可能會(huì)把圖標(biāo)損壞灰嫉，他是從中間向兩邊平鋪碰声，不會(huì)保證圖標(biāo)的完整性 round（環(huán)繞）--會(huì)按照整數(shù)的個(gè)數(shù)來(lái)排列，不會(huì)把這個(gè)圖標(biāo)損壞（肯定會(huì)自己自適應(yīng)） stretch(拉伸)--把切割的九宮格當(dāng)中的邊對(duì)應(yīng)的圖標(biāo)拉伸
-
border-image-repeat
border-image-jugongtu-2.png
border-image-repeat-round.png
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
ul {
width: 960px;
margin: 40px auto;
list-style: none;
background-color: #FFF;
}
li {
padding: 15px;
}
li:nth-child(2) {
width: 300px;
height: 150px;
border: 1px solid green;
border-image-source: url("img/border1.png");
border-image-slice: 36 36 27 27;
border-image-width: 36px;
border-image-repeat: round;
}
</style>
</head>
<body>
<ul>
<li>
<div class="border-image">
<img src="./img/border1.png" alt="">
</div>
</li>
<li>
<div class="border-image"></div>
</li>
<li>
<div class="border-image"></div>
</li>
</ul>
</body>
</html>
20161103205629.jpg
*此案例只是想保證右上角的完整性熬甫，所以左上角和右下角變形時(shí)正常的，因?yàn)?636蔓罚，右面有一點(diǎn)空白椿肩，索引把它變成正方形，肯定會(huì)變形的 **
最大的好處就是自適應(yīng)豺谈，但是有可能存在兼容問題郑象，但是高版本的沒有問題
背景
- 例如background-size:cover;
- 它能讓我們的背景鋪滿整個(gè)盒子，不管有沒有裁剪掉茬末，簡(jiǎn)言之：按比例縮放厂榛，鋪滿整個(gè)盒子盖矫，如果有裁剪的，還想讓盒子居中顯示在盒子中background-position:center,center;
- 例如background-size:contain;
- 它能讓背景圖片完全顯示在盒子中击奶，但是有可能鋪不滿哦辈双！簡(jiǎn)言之：按比例縮放，全部顯示在盒子中
這兩個(gè)屬性是動(dòng)態(tài)的柜砾，而且都是按比例縮放的
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div{
height: 300px;
width: 400px;
margin: 80px auto;
box-shadow: 0px 0px 10px green;
background: url('img/feng.jpg') no-repeat;
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
feng.jpg
這個(gè)本來(lái)是高度不夠的湃望，但是用了background-size:cover，它就能鋪滿了痰驱，background-position:center center;
背景原點(diǎn)/背景裁剪
- 背景原點(diǎn)：
- 背景的平鋪從內(nèi)邊距開始backgrond-origin:padding-box;(默認(rèn))
- 背景的平鋪從邊框開始background-origin:border-box;
- 背景的平鋪從內(nèi)容開始background-origin:content-box;
- 背景裁剪：
- background-clip:border-box;（默認(rèn)屬性）
*除了內(nèi)邊距证芭，其他部分都要被裁剪（往外） background-clip:padding-box;
*裁剪的區(qū)域，內(nèi)容以外的區(qū)域都要被裁剪掉 background-clip:content-box;
**這兩個(gè)屬性的出現(xiàn)：是為了京東的移動(dòng)站
2.jpg
例如：上面的這個(gè)圖
**
多背景
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 多重背景</title>
<style>
.duo {
width: 623px;
height: 417px;
margin: 100px auto;
/*多背景的使用*/
background:
url("images/bg1.png") left top no-repeat,
url("images/bg2.png") right top no-repeat,
url("images/bg3.png") right bottom no-repeat,
url("images/bg4.png") left bottom no-repeat,
url("images/bg5.png") center center no-repeat
;
/*background 會(huì)覆蓋一下小屬性 默認(rèn)是包含一些小屬性的默認(rèn)樣式*/
background-color: #FFF;
}
body {
background-color: #CCC;
}
</style>
</head>
<body>
<div class="duo"></div>
</body>
</html>
