今天小编跟大家讲解下有关css3图片边框border-image的用法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3图片边框border-image的用法 的相关资料，希望小伙伴们看了有所帮助。
对于CSS属性 border 相信所有的WEB开发人员都非常熟悉。我们可通过设置HTML元素的 border 的宽度、颜色、样式 来让HTML元素表现出不同的边框 比如双线、虚线、圆点线。但不管你怎么设置 这些都是一些非常原始的做法。从CSS3起 我们有了一个新的属性： border-image 它能让你用漂亮的小图片来围绕HTML元素 以图片边框的形式出现。通过 border-image 属性 我们可以制作出非常漂亮的边框样式。
在CSS3里引入的很多新特征中 比如HTML5中新型input类型, 中文字体(web font) ,placeholder等 都很实用 也很流行 而且我们之前也举了一个非常漂亮的 border-image 的例子 但网络上使用图片边框 border-image 的还是很少 我想主要是因为谷歌浏览器和火狐浏览器很早就支持它们了 而IE11才支持这种语法。
图片边框 border-image 的语法
复制代码代码如下: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
这些语法描述看起来非常的枯燥 每个人都喜欢看实例 这样最容易理解 下面我们就来将几个实例。
图片边框 border-image 用法一：边框图循环平铺(repeat)
这种情况下 边框图图片将会依次平铺 填满边框区域。
<div id="repeat">图片将会循环贴满边框区域</div>#repeat { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 repeat; -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; -o-border-image:url("/files/4127/border.png") 30 30 repeat; border-image:url("/files/4127/border.png") 30 30 repeat;}实例演示1：
图片边框 border-image 用法二：边框图自适应循环平铺(round)
大家也许看到了 上面的图片边框虽然很漂亮 但有个瑕疵 就是当元素宽度或高度不是边框图的整数倍时 最后一个/第一个图片不能完成显示 会被遮挡一部分 这样看起来很不美观。CSS3的设计者们已经考虑到了这个问题 使用 round 属性值 就能避免这种情况。 round 的作用是边框图进行稍微的调整 来保证每个图片都能完成显示 增加了观赏性。
<div id="round">图片将会贴满边框区域</div>#round { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 round; -webkit-border-image:url("/files/4127/border.png") 30 30 round; -o-border-image:url("/files/4127/border.png") 30 30 round; border-image:url("/files/4127/border.png") 30 30 round;}实例演示2
图片边框 border-image 用法三：边框图拉伸平铺(stretch)
‘stretch’就是拉伸 将小图片拉长来填满边框区域 并不循环 很显然 这样边框图会变形。
<div id="stretch">图片将会拉伸贴满边框区域.</div>#stretch { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 stretch; -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; -o-border-image:url("/files/4127/border.png") 30 30 stretch; border-image:url("/files/4127/border.png") 30 30 stretch;}实例演示3
很显然 border-image 第一种用法应该是不常用的 因为有时候它会导致边框有残缺的感觉。而第二种和第三种用法各有千秋 是各自不同的美。这里使用的边框图其实很简单。精巧的美工能做出更漂亮的边框图 能呈现出让人赞叹的效果 就比如之前的文章里的一个例子 下面再次拿出来给大家看看。
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
