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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 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开发框架总结收藏
2008/04/24 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
js三种排序算法分享
2012/08/16 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
Python的Django框架安装全攻略
2015/07/15 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
自学python用什么系统好
2020/06/23 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
中科前程Java笔试题
2016/11/20 面试题
《颐和园》教学反思
2014/02/26 职场文书
专项法律服务方案
2014/06/11 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
关于迟到的检讨书
2015/05/06 职场文书
详解Redis瘦身指南
2021/05/26 Redis
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android