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浏览器


效果图

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

解决新版本Chrome无法显示border-image问题

解决新版本Chrome无法显示border-image问题
  • hztgcl1986
  • hztgcl1986
  • 2016年03月30日 16:59
  • 3082

CSS3之渐变(线性渐变,径向渐变)

渐变 一、           线性渐变 1         线性渐变格式 linear-gradient([ || ,]? , …) 只能用在背景上       2         IE filte...
  • u013267266
  • u013267266
  • 2016年04月12日 16:05
  • 2400

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)
  • bymyself11
  • bymyself11
  • 2016年07月19日 15:49
  • 3107

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

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

CSS3 border-image

border-image 简介border-image 属性是一个简写属性,用于设置以下属性: border-image-source 边框图片的路径 border-image-slice 边框图...
  • chy555chy
  • chy555chy
  • 2017年02月10日 17:28
  • 315

CSS3属性之border-image

CSS3的border范围内有border-radius、box-shadow,border-image三个属性,另外网上有些资料把border-color属性的多边框色也归到css3,不过经测试只有...
  • Servenity
  • Servenity
  • 2016年12月07日 13:29
  • 758

css3中border-image的使用

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

css3:border-image边框图像详解

 自我介绍 hello,大家好,我叫小黑,也叫xiaoho,目前喜欢并从事写页面。因为不喜欢在那些类似BBS型的论坛上发帖,所以之前在html-js上发表几篇戳文,...
  • linqing0201
  • linqing0201
  • 2017年03月31日 10:48
  • 400

CSS3 border-image 不同浏览器的表现记录

CSS3 border-image 这篇文章说的很详细, border-image功能强大需要大家花点时间去体验,下面是我学习时候遇到的一些问题与记录,与大家一起共享。 工具:浏览器chrome...
  • jjbob77
  • jjbob77
  • 2012年12月06日 00:32
  • 4660

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

http://www.jb51.net/css/38358.html 一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用...
  • liumf2005
  • liumf2005
  • 2013年10月23日 23:04
  • 585
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 的 border-image
举报原因:
原因补充:

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