css3图片边框border-image的用法

发布时间：2017-06-30 15:42:14 作者：极客头条

在CSS3里引入的很多新特征中，这篇文章主要介绍了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; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  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; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  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; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

实例演示3

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Tag：border-image CSS3

在线CSS边框圆角效果代码工具
这是一款由脚本之家翻译自国外网站的在线CSS工具，可在线调整生成样式的边框圆角效果，以及边框的宽度、颜色、样式等属性，还可实时预览生成的CSS代码，并支持一键复制代码
2017-09-19
使用CSS的border属性构建变形边框的方法总结
border是最常用的用来制作各种各样div边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换:
2016-06-23
border-radius以外的CSS圆角边框制作方法
用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.
2016-06-02
详解CSS的border边框属性及其在CSS3中的新特性
这篇文章主要介绍了详解CSS的border边框属性及其在CSS3中的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3中的图片边框及边框渐变,需要的朋友可以参考下
2016-05-10
深入浅析css3 border-image边框图像详解
css3中新增了一个属性 border-image ，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边
2015-11-24
CSS3之边框多颜色Border-color属性使用示例
Border-color是专为边框的多颜色而准备的属性，接下来为大家介绍一下CSS3之边框多颜色Border-color的使用，喜欢的朋友不要错过
2013-10-11
一文教你玩转CSS border(边框)
这篇文章主要介绍了一文教你玩转CSS border(边框),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-19

css3图片边框border-image的用法

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容