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实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 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
PHP学习笔记之数组篇
2011/06/28 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python将string转换到float的实例方法
2019/07/29 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python实现银行实战系统
2020/02/26 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Python jieba库分词模式实例用法
2021/01/13 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
自考自我鉴定范文
2013/10/30 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
办理房产过户的委托书
2014/09/14 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL