您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
css3边框属性-repeat,slice,outset
发布时间：2015-06-21 09:14:54编辑：雪饮阅读（）
repeat-repeat
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div{
width:300px;
height:300px;
background:url(shuaige.jpg) no-repeat center;
border-image-source:url(border.png);
border-image-width:27px;
border-image-slice:27;
border-image-outset:0px;
border-image-repeat:repeat;
/*
设定重复方式为重复
以中心为原点来重复，而并不是从左到右进行重复
*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
预览图：
repeat-round
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div{
width:300px;
height:300px;
background:url(shuaige.jpg) no-repeat center;
border-image-source:url(border.png);
border-image-width:27px;
border-image-slice:27;
border-image-outset:0px;
border-image-repeat:round;
/*
设定重复方式为round
四舍五入，自动处理边界残余
貌似该属性目前仅火狐浏览器实现了
*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
预览图：
slice-fill
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);/*边框图片属性*/
border-image-width:27px;/*边框图片宽度属性*/
border-image-slice:27 fill;
/*设定边框图片背景填充内容部分,会显示第5块切割的内容*/
border-image-outset:0px;/*边框图片扩展属性*/
border-image-repeat:stretch;/*边框图片重复属性*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
预览图：
outset
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);
border-image-width:27px;
border-image-slice:27;
border-image-outset:27px;/*边框向外扩展的大小*/
border-image-repeat:repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
预览图
关键字词：css3边框属性,slice,个人博客
上一篇：css3边框属性-裁剪原理