您的位置：首页 > 其它

为边框应用图片 border-image

2016-09-02 09:43 197 查看

顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如：

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景图片复杂一些。

想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？ 图片会自动被切割分成四等分。用于四个边框。

可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70*70像素）拼成的一张图（210*210像素），并标注好序号，是不是像传说中的九宫图，如下：

我们把上图当作边框图片来应用一下，看一看是什么效果

根据border-image的语法：

<!doctype www.dztcsd.com/html>

<html>

<head>

<meta charset="utf-8">

<title>边框图片</title>

<style>

#border_image {

margin:0 auto;
height:100px;
line-height:100px;
text-align:center;
font-size:30px;
width:450px;
border:15px solid #ccc;

}

</style>

</head>

<body>

<div id="border_image">

请为我镶嵌上漂亮的画框吧

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航