css3中，border-image怎么用？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3中，border-image怎么用？相关的知识，希望对你有一定的参考价值。
参考网址不是说的很明白了么？border-image:url:(images/WhiteButton.png) 0 12 0 12 stretch stretch;
“0 12 0 12”：按顺时针方向分别是上右下左边框的宽度，即上：0；右：12；下：0;左：12。
stretch | repeat | round 即为除去边框后的图像拉伸的方法，第一个stretch为上下拉伸方法，第二个stretch为左右拉伸方法：
stretch：指定用拉伸方式来填充边框背景图。
repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。 参考技术A
border-image-source：
定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
border-image-slice：
定义元素边框背景图像从什么位置开始分割。
border-image-width：
定义元素边框背景图像厚度。
border-image-outset：
定义元素边框背景图像的外延尺寸。
border-image-repeat：
定义元素边框背景图像的平铺方式。
建议看下css手册，https://www.apiref.com/css-zh/properties/backgrounds/border-image.htm，文档讲的很详细
参考技术B border-image?没记错的话是background-image吧，就是背景图片的意思。background-image:url(../images/1.jpg)括号里面是图片的地址。border，是边框的意思，border:1px solid #f00;边框的粗细，实体线，后面是颜色。追问
我说的是css3
追答http://www.cnblogs.com/niuniu/archive/2010/06/21/1761803.html
去看下，很简单的。
border-image用法详解
图像边框 border-image
使用方法：border-image:url(‘图像路径‘) 边距（不能带单位）/宽度 上下方式 左右方式；（四个边距，上右下左，相同时可缩写为一个）
repeat平铺 stretch拉伸 round
<style type="text/css">
.div1{
display: inline-block;
margin-right: 30px;
background: #000;
width: 389px;
height: 389px;
border-style: solid;
border-width: 100px; /*设置边框宽度之前要先设置边框样式，不然不会显示的，这是在content外添加空间*/
border-image:url("images/3.jpg") 100 repeat;
}
.div2{
display: inline-block;
background: darkred;
width: 389px;
height: 389px;
/*直接在border-image中设置border宽度,这样实际上是占用了content的区域空间*/
border-image:url("images/3.jpg") 100/100px repeat;
}
</style>
</head>
<body>
<div class="div1">CSS3新增的background-clip属性</div>
<div class="div2">CSS3新增的background-clip属性</div>
</body>
以上是关于css3中，border-image怎么用？的主要内容，如果未能解决你的问题，请参考以下文章