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实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
css3带你实现3D转换效果
Feb 24 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中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
使用requests库制作Python爬虫
2018/03/25 Python
python版飞机大战代码分享
2018/11/20 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
《泉水》教学反思
2014/04/11 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python