css3图像边框：border-image - 代码篇

最新推荐文章于 2024-08-20 16:34:09 发布

草巾冒小子

最新推荐文章于 2024-08-20 16:34:09 发布

阅读量1.4k

点赞数

分类专栏： CSS 3 img图片处理

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/90519066

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

img图片处理

42 篇文章 2 订阅

订阅专栏

css3图片边框：border-image的应用，含效果图

一、这是我使用的图片：

在这里插入图片描述

效果图如下：

在这里插入图片描述

部分css代码如下：

/*文字卡片 vip-border*/
	.vip-border{border-radius: 0;box-shadow: none;
		border:15px solid transparent;
		box-sizing: border-box;
		/*边框图片 兼容处理*/
		-moz-border-image:url(../images/vip-border.png) 30 30 round;	/* Old Firefox */
		-webkit-border-image:url(../images/vip-border.png) 30 30 round;	/* Safari and Chrome */
		-o-border-image:url(../images/vip-border.png) 30 30 round;		/* Opera */
		border-image:url(../images/vip-border.png) 30 30 round;
	}

二、demo 附件：

效果图：

演示代码 · 如下：

<!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>
		
		<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>