css3图片边框border-image的用法


Posted in HTML / CSS onJune 30, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
css3 border-radius属性详解
Jul 05 #HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 #HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 #HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 #HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 #HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 #HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 #HTML / CSS
You might like
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
对python中的高效迭代器函数详解
2018/10/18 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
大学生毕业求职的自我评价
2013/09/29 职场文书
销售人员获奖感言
2014/02/05 职场文书
高一新生军训感言
2014/03/02 职场文书
会计岗位职责范本
2014/03/07 职场文书
表彰会主持词
2014/03/26 职场文书
趣味运动会策划方案
2014/06/02 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL