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实现超炫风车特效
Nov 12 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
js验证上传图片的方法
2015/05/12 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
python 判断自定义对象类型
2009/03/21 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python微信公众号开发简单流程
2018/03/23 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
旅行社各个岗位职责
2014/03/15 职场文书
市场推广策划方案
2014/06/02 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
活着观后感
2015/06/03 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python