css3 border-image使用说明
发布时间：2010-06-23 17:42:24 作者：佚名 
我要评论
我要评论css3_快速弄明白border-image
在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说 推荐大家看下 这篇文章 https://www.jb51.net/css/38358.html
首先来一个素材图片whiteButton.png
然后我们要做成这样的效果：
代码（呵呵！请不要急，继续向下看）：
复制代码
代码如下:<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}
<number>：
拉伸 | 重复 | 平铺 (其中stretch是默认值。)
请看下图平剖析一下css代码
也就是：
他们把图片，用#的方式截取，然后用 stretch | repeat | round 来控制水平或垂直的效果。看看下图你就明白了
当然关于边框的宽度你也可以用%;其原理也是一样：
到这 大家应该弄明白border-image是怎么一回事了吧。
给大家 一些例子 练习
圆角
borderImage
border-width: 10px;
border-image: url("media/roundedCorner.png") 20;ninja!
border-width: 20px;
border-image: url("media/border.png") 20;Drop shadow
wooooosh
border-width: 10px;
border-image: url("media/blackShadow.png") 5;Tab
katanas
border-width: 15px 20px 0;
border-image: url("media/tab.png") 20 20 0;learn
to be
lazy
to be
lazy
border-width: 10px 10px 0;
border-image: url("media/gradient.png") 10 10 0;多个按钮
But not impossible.
This one is tricky.相关文章
- css3中新增了一个属性 border-image ，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边2015-11-24
- 这篇文章主要介绍了详解CSS3中border-image的使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下2015-07-18
CSS3 border-image详解、应用及jQuery插件
border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-i2011-08-29深入浅出CSS3 background-clip,background-origin和border-image教程
最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档2011-01-27- 在CSS3里引入的很多新特征中，这篇文章主要介绍了css3图片边框border-image的用法,具有一定的参考价值，有兴趣的可以了解一下2017-06-30
最新评论