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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 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
php全角字符转换为半角函数
2014/02/07 PHP
php模板引擎技术简单实现
2016/03/15 PHP
eval与window.eval的差别分析
2011/03/17 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python中加背景音乐如何操作
2020/07/19 Python
python中的yield from语法快速学习
2020/11/06 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
部队领导证婚词
2014/01/12 职场文书
教师党性分析材料
2014/02/04 职场文书
调查研究项目计划书
2014/04/29 职场文书
村班子对照检查材料
2014/08/18 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
安徽导游词
2015/02/12 职场文书
英文慰问信
2015/02/14 职场文书
档案工作个人总结
2015/03/03 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
水知道答案观后感
2015/06/08 职场文书