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 animate制作绚丽的动画效果
Nov 24 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 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
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php编程每天必学之验证码
2016/03/03 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
浅析python的Lambda表达式
2019/02/27 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python zip()函数的使用示例
2020/09/23 Python
用Python制作音乐海报
2021/01/26 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
一年级家长会邀请函
2014/01/25 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
实习单位指导教师评语
2014/12/30 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
暑期实践个人总结
2015/03/06 职场文书