您的位置：首页 > Web前端 > CSS

CSS3 border-image用法的详解

2018-01-09 16:28 645 查看

原文链接：http://www.cnblogs.com/Hfive/p/3624004.html

图像边框：IE9.0及以下均不支持

border-image:url() 该属性用于指定边框宽度（上右下左）背景图的填充方式（[ stretch | repeat | round ]默认值：stretch ）

）

stretch：指定用拉伸方式来填充边框背景图。

repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

如：border-image: url(1.png) 49% repeat; border-image: url(1.png) 125 202 166 166 round;

例子：

使用的背景图：

效果一：

原理：

上下左右各以166px的距离分割成九块，a，b，c，d四块分别为div的四个角，且每个角的背景图大小会自适应为border的大小，然后两个角之间的背景图根据div的boder除去四个角的大小进行拉伸。

代码：

1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 height: 300px;
9 width: 300px;
10 border-width: 50px;
11 border-image: url(1.png) 166 round;
12 background: #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div></div>
18 </body>
19 </html>

效果二：

原理：

对背景图上下左右进行100%的切割，即div四个角为整张背景图，由于切割超过50%，两个角之间的背景图没有重合部分，所以border-image无法进行拉伸。

代码：

1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 height: 300px;
9 width: 300px;
10 border-width: 50px;
11 border-image: url(1.png) 100% round;
12 background: #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div></div>
18 </body>
19 </html>

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

标签：

相关文章推荐

新的分享

章节导航