css3 的 border-image

原创 2013年12月02日 16:14:37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		width:300px;
		border:20px solid transparent;	
		padding:10px 20px;
	}
	.round{
		-moz-border-image:url(border.png) 30 30 round;	/* Old Firefox */
		-webkit-border-image:url(border.png) 30 30 round;	/* Safari and Chrome */
		-o-border-image:url(border.png) 30 30 round;		/* Opera */
		border-image: url(border.png) round 30 30;	
	}
	.stretch{
		-moz-border-image:url(border.png) 30 30 stretch;	/* Old Firefox */
		-webkit-border-image:url(border.png) 30 30 stretch;	/* Safari and Chrome */
		-o-border-image:url(border.png) 30 30 stretch;	/* Opera */
		border-image: url(border.png) stretch 30 30;
	}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="round">round的效果,图片充满边框</div>
<br>
<div class="stretch">stretch的效果,图片拉伸填充</div>
</body>
</html>


注意:border-image不支持ie浏览器


效果图

版权声明:原创文章,请标明出处~~~

相关文章推荐

CSS3 border-image

border-image 简介border-image 属性是一个简写属性,用于设置以下属性: border-image-source 边框图片的路径 border-image-slice 边框图...

CSS3属性之border-image

CSS3的border范围内有border-radius、box-shadow,border-image三个属性,另外网上有些资料把border-color属性的多边框色也归到css3,不过经测试只有...

css3中border-image的使用

原文链接:点击打开链接 Border-image的学习: border-image属性是css3中新增的属性,用于设置边框的背景图。以前这只border一般都是solid、dashed、dotted...

CSS3实例教程:border-image属性实例讲解

一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅Firefox3.5,chro...

css3学习之border-image

目前我测试的浏览器有Firefox,chrome可以支持,ie8  360 遨游都是ie内核均不支持,据说safari支持,可我touch不在身边,没法测试火狐firefox 谷歌chrome代码如下...

CSS3 Border-image

转载自:http://www.w3cplus.com/content/css3-border-image CSS3中有关于border的属性我们一起学习完了圆角border-radius和边...

CSS3--border-image整理

CSS3中的border-image是非常有用的,但是有点不太好理解,因为 border-image的实际功能是它的字面意思有点不太统一。从字面上来看border-image只是针对边框有效,但是在实...

CSS3 border-image详解、应用及jQuery插件

一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅Firefox3.5,chro...
  • jjbob77
  • jjbob77
  • 2012年12月05日 22:43
  • 1142

深入浅出CSS3:background-clip,background-origin和border-image教程

深入浅出CSS3:background-clip,background-origin和border-image教程

CSS3 border-image详解

一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅Firefox3.5,chrom...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 的 border-image
举报原因:
原因补充:

(最多只允许输入30个字)