↓返回底部
JS PHP HTML5 CSS3 jQuery SQL BootStrap5 Other
边框 方框 字体 选择器 其他

CSS3图片边框

<meta charset="utf-8">
<style> 
div{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#round{
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
	border-image:url(border.png) 30 30 round;
}

#stretch{
	-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 stretch; /* Opera */
	border-image:url(border.png) 30 30 stretch;
}
</style>


<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="border.png" />

运行结果

  • Server Sent | 在线编辑 | 1.php |
  • 欢迎纠错:如果发现错误,请发到我的QQ:3166692976,感谢!
  • 本站及其内容仅作为站长本人学习探索之用途,不保证(包括但不限于)内容的准确性、有效性。本站保留解释权。
  • 心不得满,事不得全。鸟飞不尽,话说不完。休息一下吧!
  • 1500km.com,   Copyright ©2022,   all rights received.
  • ↑返回顶部