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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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创建动态图像
2006/10/09 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
How do I change MySQL timezone?
2008/03/26 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
Ext 今日学习总结
2010/09/19 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python中的多重装饰器
2015/04/11 Python
python写日志封装类实例
2015/06/28 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
基于python实现查询ip地址来源
2020/06/02 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
毕业自我鉴定
2013/11/05 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
乒乓球比赛通知
2015/04/27 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS