CSS3|Html5 网站首页 CSS3|Html5

css3边框属性-裁剪原理

发布时间：2015-06-20 11:18:14编辑：雪饮阅读（）

案例源代码如下：

<!doctype html>

<html>

<head>

<style>

div{

width:300px;

height:300px;

background:url(./shuaige.jpg) center no-repeat ;

border-image-source:url(./border.png);/*边框图片属性*/

border-image-width:27px;

边框图片宽度属性

设置边框图片的宽度后，会在div的四周预留27宽度的矩形（空心环形）

border-image-slice:27;

边框图片切割属性

将引入的边框图片裁剪成9块相同宽度（27）后分别放于

div与边框被裁剪成9块（宽、高不同）后的对应位置，具体裁剪与放置如下“边框图片裁剪放置原理”所示，就是因为下面的“border-image-repeat:stretch;”所以会看到边框图片中除过边界的地方都会有拉伸（当然是在背景不重复的情况下）

border-image-outset:0px;/*边框图片扩展属性*/

border-image-repeat:stretch;/*边框图片重复属性（stretch默认拉伸属性）*/

}

</style>

</head>

<body>

<div>

</div>

<br/>

<strong>边框图片裁剪放置原理:</strong>

</body>

</html>

预览图：

个人博客.jpg

完整源码下载

css3边框属性-裁剪原理.rar

关键字词：css3,边框属性,个人博客