CSS border-image 属性 详解
css3基础 2022-07-14 15:56:15小码哥的IT人生shichen
CSS border-image 属性
定义和用法
border-image 属性是一个简写属性，用于设置以下属性：
如果省略值，会设置其默认值。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
另请参阅：
CSS3 教程：CSS3 边框
实例
将图片规定为包围 div 元素的边框：
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round; /* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="/i/border.png">
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面底部有更多实例。
CSS 语法
border-image: source slice width outset repeat|initial|inherit;
属性值
| 值 | 描述 | 测试 |
|---|---|---|
| border-image-source | 用在边框的图片的路径。 | |
| border-image-slice | 图片边框向内偏移。 | |
| border-image-width | 图片边框的宽度。 | |
| border-image-outset | 边框图像区域超出边框的量。 | |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 | 测试 |
技术细节
| 默认值： | none 100% 1 0 stretch |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.borderImage="url(border.png) 30 30 round" |
更多实例
完整实例【Border-image 按钮】：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:10px solid transparent;
width:40px;
padding:5px 10px;
-moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
-webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Opera */
border-image: url(/i/border_image_button.png) 0 14 0 14 stretch;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 border-image 属性。</p>
<div>Search</div>
<p>这是我们使用的图片：</p>
<img src="/i/border_image_button.png">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何通过 border-image 属性来创建按钮。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
完整实例1：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
border-image:url(/i/border.png) 30 30 stretch;
-webkit-border-image:url(/i/border.png) 30 30 stretch;
-moz-border-image:url(/i/border.png) 30 30 stretch;
-o-border-image:url(/i/border.png) 30 30 stretch;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>border-image:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="url(/i/border.png) 30 30 stretch" checked="checked" />url(/i/border.png) 30 30 stretch</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="url(/i/border.png) 30 30 round" />url(/i/border.png) 30 30 round</li>
</ul>
</form>
<div id="SelAreaCode">
<p>这是我们使用的图片：</p>
<img src="/i/border.png" />
</div>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV">
<b>注释：</b>Internet Explorer 不支持 border-image 属性。
</div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
#MyDIV
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
border-image:<span id="CodeValue">url(/i/border.png) 30 30 stretch</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.borderImage=strValue;
document.getElementById(strId).style.WebkitBorderImage=strValue;
document.getElementById(strId).style.MozBorderImage=strValue;
document.getElementById(strId).style.OBorderImage=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
