边框/背景
2016-12-03 本文已影响0人
lily1314
边框图片：
例如：border-image:url("") 27/20px round;
- 参数1：边框图片的路径
- border-image-source
- 参数2：切割的尺寸，切了四刀，顺序为：上右下左，单位是px，默认，所以不用带单位
- border-image-slice
border-image-jugongtu.png
- 参数3：边框的宽度，因为此例子是20，所以那27自适应显示在边框中
- border-image-width
- 参数4：平铺的方式：repeat(平铺)--可能会把图标损坏，他是从中间向两边平铺，不会保证图标的完整性 round（环绕）--会按照整数的个数来排列，不会把这个图标损坏（肯定会自己自适应） stretch(拉伸)--把切割的九宫格当中的边对应的图标拉伸
-
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
*此案例只是想保证右上角的完整性，所以左上角和右下角变形时正常的，因为3636，右面有一点空白，索引把它变成正方形，肯定会变形的 **
最大的好处就是自适应，但是有可能存在兼容问题，但是高版本的没有问题
背景
- 例如background-size:cover;
- 它能让我们的背景铺满整个盒子，不管有没有裁剪掉，简言之：按比例缩放，铺满整个盒子，如果有裁剪的，还想让盒子居中显示在盒子中background-position:center,center;
- 例如background-size:contain;
- 它能让背景图片完全显示在盒子中，但是有可能铺不满哦！简言之：按比例缩放，全部显示在盒子中
这两个属性是动态的，而且都是按比例缩放的
<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
这个本来是高度不够的，但是用了background-size:cover，它就能铺满了，background-position:center center;
背景原点/背景裁剪
- 背景原点：
- 背景的平铺从内边距开始backgrond-origin:padding-box;(默认)
- 背景的平铺从边框开始background-origin:border-box;
- 背景的平铺从内容开始background-origin:content-box;
- 背景裁剪：
- background-clip:border-box;（默认属性）
*除了内边距，其他部分都要被裁剪（往外） background-clip:padding-box;
*裁剪的区域，内容以外的区域都要被裁剪掉 background-clip:content-box;
**这两个属性的出现：是为了京东的移动站
2.jpg
例如：上面的这个图
**
多背景
<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 会覆盖一下小属性 默认是包含一些小属性的默认样式*/
background-color: #FFF;
}
body {
background-color: #CCC;
}
</style>
</head>
<body>
<div class="duo"></div>
</body>
</html>
