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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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/12/13 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
python实现两张图片的像素融合
2019/02/23 Python
python实现控制COM口的示例
2019/07/03 Python
Python3进制之间的转换代码实例
2019/08/24 Python
在django中自定义字段Field详解
2019/12/03 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
寄语是什么意思
2014/04/10 职场文书
节能减排倡议书
2014/04/15 职场文书
法院答辩状格式
2015/05/22 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
使用tensorflow 实现反向传播求导
2021/05/26 Python
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python