<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
/* width: 200px;
height: 200px;
border-width:30px;
border-image-source:url(1.jpg);*/
width: 200px;
height: 200px;
border-width: 30px;
border-image: url(2.jpg) 33% round;
/* border-image-source:url(2.jpg);
border-image-slice:34%;
border-image-repeat:repeat;*/
/*border-image-outset:20px 50px;*/
}
.box2{
width: 200px;
height: 200px;
border-width:30px;
border-image-source:url(1.jpg);
border-image-slice:35%;
/*内部不填充*/
/*-webkit-border-image:url(2.jpg) 35%;*/
/*内部填充*/
}
/*四个角取35%大小剩余的拉伸*/
.box3{
width: 200px;
height: 200px;
border-width:30px;
border-image-source:url(1.jpg);
border-image-slice:45%;
border-image-repeat: stretch;/*内部不填充*/
/*border-image:url(1.jpg) 33% stretch;*/
/*-webkit-border-image:url(1.jpg) 33% stretch;*/
/*内部填充*/
/*-ms-border-image:url(1.jpg) 33% stretch;
-moz-border-image:url(1.jpg) 33% stretch;*/
}
.box4{
width: 200px;
height: 200px;
border-width:30px;
border-image-source:url(1.jpg);
border-image-slice:33%;
border-image-repeat: round;
/*内部不填充*/
/*-webkit-border-image:url(1.jpg) 33% round;*/
/*内部填充*/
}
.box5{
width: 200px;
height: 200px;
border-width:30px;
border-image-source:url(1.jpg);
border-image-slice:33%;
border-image-repeat: repeat;
/*-webkit-border-image:url(1.jpg) 33% repeat;*/
}
.box6{
width: 200px;
height: 200px;
border-width:30px;
border-image-source:url(1.jpg);
border-image-slice:20%;
border-image-repeat: round;
border-image-width: 90px;
/*-webkit-border-image:url(1.jpg) 33% round ;*/
}
.box7{
margin: 100px auto;
width: 200px;
height: 200px;
border-width:30px;
border-image-source:url(1.jpg);
border-image-slice:33%;
border-image-repeat: round;
border-image-width: 30px;
border-image-outset: 30px 100px;
background: red;
}
</style>
</head>
<body>
相关属性
border-image:url() slice repeat
border-image-source:url 引入图片的路径
border-image-slice: 上右下左4个偏移量 图片边框向内偏移,对图像进行切割
border-image-repeat: round/stretch/repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-width: 图片边框的宽度。
border-image-outset: 边框图像区域超出边框的量。
兼容性：Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性
<!-- border-image-source -->
<div class="box1"></div>
<!-- border-image-slice -->
<div class="box2"></div>
<!-- border-image-repeat -->
<!-- border-image-repeat可设置1到2个参数，分别表示水平和垂直平铺方式 -->
<!-- stretch 拉伸(默认值)-->
<div class="box3"></div>
<!-- round 铺满 -->
<div class="box4"></div>
<!-- repeat 平铺 -->
<div class="box5"></div>
<!-- border-image-width -->
<!-- 可调整边框图片的宽度,同样上右下左可设置4个值 -->
<div class="box6"></div>
<!-- border-image-outset -->
<!-- 使边框向外扩展，可设置4个值上右下左 -->
<div class="box7"></div>
</body>
</html>
网友评论