CSS3 border-image 属性使用图像创建边框

Xebcnor

工程师 (已认证)

原创分享签约作者

发表于实例源码

1100

CSS3 border-image 属性使用图像创建边框

实例源码：

源代码：

执行

执行中...

编辑/阅读全部代码

执行结果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>时代Java与您共同学习(NowJava.com)</title> 
<style> 
div
{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#round
{
	-webkit-border-image:url(https://nowjava.com/static/uv/i/nowj_logo_small.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(https://nowjava.com/static/uv/i/nowj_logo_small.png) 30 30 round; /* Opera */
	border-image:url(https://nowjava.com/static/uv/i/nowj_logo_small.png) 30 30 round;
}

#stretch
{
	-webkit-border-image:url(https://nowjava.com/static/uv/i/nowj_logo_small.png) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(https://nowjava.com/static/uv/i/nowj_logo_small.png) 30 30 stretch; /* Opera */
	border-image:url(https://nowjava.com/static/uv/i/nowj_logo_small.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="https://nowjava.com/static/uv/i/nowj_logo_small.png" />

</body>
</html>

本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。

编辑于 2020-11-14 20:33:462020-11-14 20:33:46

实例源码

实例源码订阅