图片边框border-image的用法

http://www.qikuedu.com

图片边框border-image 的用法

对于CSS 属性border，相信所有的WEB 开发人员都非常熟悉。我们可通过设置HTML 元素的border 的宽度、颜色、样式，来让HTML 元素表现出不同的边框，比如双线、虚线、圆点线。但不管你怎么设置，这些都是一些非常原始的做法。从CSS3起，我们有了一个新的属性：border-image，它能让你用漂亮的小图片来围绕HTML 元素，以图片边框的形式出现。通过border-image 属性，我们可以制作出非常漂亮的边框样式。

在CSS3里引入的很多新特征中，比如HTML5中新型input 类型, 中文字体(webfont) , placeholder 等，都很实用，也很流行，而且我们之前也举了一个非常漂亮的

border-image 的例子，但网络上使用图片边框border-image 的还是很少，我想主要是因为谷歌浏览器和火狐浏览器很早就支持它们了，而IE11才支持这种语法。

图片边框border-image 的语法正式语法：||[/

|/?/

]?||

这些语法描述看起来非常的枯燥，每个人都喜欢看实例，这样最容易理解，下面我们就来将几个实例。

图片边框border-image 用法一：边框图循环平铺(repeat)

这种情况下，边框图图片将会依次平铺，填满边框区域。

图片将会循环贴满边框区域

#repeat{

http://www.qikuedu.com

border :15px solid transparent ;

padding :10px 20px ;

-moz-border-image :url("/files/4127/border.png")3030repeat ; /*Old Firefox */

-webkit-border-image :url("/files/4127/border.png")3030repeat ; /*Safari */

-o-border-image :url("/files/4127/border.png")3030repeat ; /*Opera */border-image :url("/files/4127/border.png")3030repeat ;}

实例演示1：

图片边框border-image 用法二：边框图自适应循环平铺(round)

大家也许看到了，上面的图片边框虽然很漂亮，但有个瑕疵，就是当元素宽度或高度不是边框图的整数倍时，最后一个/第一个图片不能完成显示，会被遮挡一部分，这样看起来很不美观。CSS3的设计者们已经考虑到了这个问题，使用round 属性值，就能避免这种情况。round 的作用是边框图进行稍微的调整，来保证每个图片都能完成显示，增加了观赏性。

图片将会贴满边框区域

#round{

border :15px solid transparent ;

padding :10px 20px ;

-moz-border-image :url("/files/4127/border.png")3030round ; /*Old Firefox */

-webkit-border-image :url("/files/4127/border.png")3030round ; /*Safari */

-o-border-image :url("/files/4127/border.png")3030round ; /*Opera */border-image :url("/files/4127/border.png")3030round ;}

实例演示2

图片边框border-image 用法三：边框图拉伸平铺(stretch)

http://www.qikuedu.com

‘stretch’就是拉伸，将小图片拉长来填满边框区域，并不循环，很显然，这样边框图会变形。

图片将会拉伸贴满边框区域.

#stretch{

border :15px solid transparent ;

padding :10px 20px ;

-moz-border-image :url("/files/4127/border.png")3030stretch ; /*Old Firefox */

-webkit-border-image :url("/files/4127/border.png")3030stretch ; /*Safari */

-o-border-image :url("/files/4127/border.png")3030stretch ; /*Opera */border-image :url("/files/4127/border.png")3030stretch ;}

实例演示3

很显然，border-image 第一种用法应该是不常用的，因为有时候它会导致边框有残缺的感觉。而第二种和第三种用法各有千秋，是各自不同的美。这里使用的边框图其实很简单。精巧的美工能做出更漂亮的边框图，能呈现出让人赞叹的效果，就比如之前的文章里的一个例子，下面再次拿出来给大家看看。