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背景_动力节点Java学院整理
Jul 11 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
初识Laravel
2014/10/30 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php递归函数怎么用才有效
2018/02/24 PHP
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
python实现百度关键词排名查询
2014/03/30 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
python实现识别相似图片小结
2016/02/22 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Django实现网页分页功能
2019/10/31 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
weblogic面试题
2016/03/07 面试题
什么是继承
2013/12/07 面试题
工程专业求职自荐书范文
2014/02/08 职场文书
实用的简历自我评价
2014/03/06 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
私人委托书格式
2014/09/10 职场文书
入党个人总结范文
2015/03/02 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL