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实现DIV圆角效果完整代码
Oct 10 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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和ACCESS写聊天室(六)
2006/10/09 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
php实例化一个类的具体方法
2019/09/19 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
NodeJS实现同步的方法
2019/03/02 NodeJs
Vue修改项目启动端口号方法
2019/11/07 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python入门_条件控制(详解)
2017/05/16 Python
深入浅析python 中的匿名函数
2018/05/21 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Python 如何实现访问者模式
2020/07/28 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
中学生打架检讨书
2014/02/10 职场文书
学校三节实施方案
2014/06/09 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
同学会邀请函模板
2015/01/30 职场文书