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 简写animation
May 10 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP分页类集锦
2014/11/18 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php实现点击可刷新验证码
2015/11/07 PHP
php中的登陆login实例代码
2016/06/20 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python timeit模块的使用实践
2020/01/13 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
2013年员工自我评价范文
2013/12/27 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
企业标语口号
2014/06/10 职场文书
学前班学生评语
2014/12/29 职场文书
大学生实习推荐信
2015/03/27 职场文书
文艺演出主持词
2015/07/01 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL