css3 border-image使用说明


Posted in HTML / CSS onJune 23, 2010

在看这个属性时,好像国内的文章都没给大家说太明白,今天就一起说说 推荐大家看下 这篇文章 https://3water.com/css/38358.html

首先来一个素材图片whiteButton.png

 css3 border-image使用说明

然后我们要做成这样的效果:

 css3 border-image使用说明

代码(呵呵!请不要急,继续向下看):

复制代码
代码如下:

<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;
border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
display: block;
width:600px;
border-width:0 12px;
padding:10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;+color:black;">在safari3+和FF3.5,chrome5.0+,opera10.53浏览器里能看到边框背景图</div>

下面我们来讲一下基本知识:

一。定义: border-image none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

 

none:
默认值。无背景图。
<image>
使用绝对或相对 url 地址指定背景图像。

 

 <number>

边框宽度用固定像素值表示。
<percentage>:
边框宽度用百分比表示。
[ stretch | repeat | round ]:

拉伸 | 重复 | 平铺 (其中stretch是默认值。)

请看下图平剖析一下css代码

css3 border-image使用说明 

也就是:

他们把图片,用#的方式截取,然后用 stretch | repeat | round 来控制水平或垂直的效果。看看下图你就明白了

  css3 border-image使用说明

 

 当然关于边框的宽度你也可以用%;其原理也是一样:

 css3 border-image使用说明

到这  大家应该弄明白border-image是怎么一回事了吧。

给大家 一些例子 练习

圆角

borderImage
border-width: 10px;
css3 border-image使用说明
border-image: url("media/roundedCorner.png") 20;


ninja!
border-width: 20px;
css3 border-image使用说明
border-image: url("media/border.png") 20;

Drop shadow

wooooosh
border-width: 10px;
css3 border-image使用说明
border-image: url("media/blackShadow.png") 5;

Tab

katanas
border-width: 15px 20px 0;
css3 border-image使用说明
border-image: url("media/tab.png") 20 20 0;


learn
to be
lazy
border-width: 10px 10px 0;
css3 border-image使用说明
border-image: url("media/gradient.png") 10 10 0;

多个按钮

hover & click
But not impossible.
css3 border-image使用说明 css3 border-image使用说明 css3 border-image使用说明
This one is tricky.

 参考文档:www.lrbabe.com/sdoms/borderImage/

ejohn.org/blog/border-image-in-firefox/ 

HTML / CSS 相关文章推荐
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 #HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 #HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 #HTML / CSS
CSS3 开发工具收集
Apr 17 #HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 #HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 #HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 #HTML / CSS
You might like
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Vue自定义指令详解
2017/07/28 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python实现车牌识别的示例代码
2019/08/05 Python
python主要用于哪些方向
2020/07/05 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
地震慰问信
2015/02/14 职场文书
法学专业求职信范文
2015/03/19 职场文书
学生会主席任命书
2015/09/21 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python