欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3 border-image使用說(shuō)明

  發(fā)布時(shí)間：2010-06-23 17:42:24   作者：佚名   我要評(píng)論
css3_快速弄明白border-image

在看這個(gè)屬性時(shí)，好像國(guó)內(nèi)的文章都沒(méi)給大家說(shuō)太明白，今天就一起說(shuō)說(shuō) 推薦大家看下 這篇文章 http://www.dbjr.com.cn/css/38358.html

首先來(lái)一個(gè)素材圖片whiteButton.png

 

然后我們要做成這樣的效果：

 

代碼（呵呵！請(qǐng)不要急，繼續(xù)向下看）：

復(fù)制代碼
代碼如下:

<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>

下面我們來(lái)講一下基本知識(shí)：

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

 

none：
默認(rèn)值。無(wú)背景圖。
<image>：
使用絕對(duì)或相對(duì) url 地址指定背景圖像。

 

 <number>：

邊框?qū)挾扔霉潭ㄏ袼刂当硎尽?
<percentage>：
邊框?qū)挾扔冒俜直缺硎尽?
[ stretch | repeat | round ]：

拉伸 | 重復(fù) | 平鋪 (其中stretch是默認(rèn)值。)

請(qǐng)看下圖平剖析一下css代碼

 

也就是：

他們把圖片，用#的方式截取，然后用 stretch | repeat | round 來(lái)控制水平或垂直的效果?？纯聪聢D你就明白了

  

 

 當(dāng)然關(guān)于邊框的寬度你也可以用%;其原理也是一樣：

 

到這  大家應(yīng)該弄明白border-image是怎么一回事了吧。

給大家 一些例子 練習(xí)

圓角

borderImage 
border-width: 10px;
a source image to slice 
border-image: url("media/roundedCorner.png") 20;


ninja! 
border-width: 20px;
a source image to slice 
border-image: url("media/border.png") 20;

Drop shadow

wooooosh 
border-width: 10px;
a source image to slice 
border-image: url("media/blackShadow.png") 5;

Tab

katanas 
border-width: 15px 20px 0;
a source image to slice 
border-image: url("media/tab.png") 20 20 0;


learn
to be
lazy
border-width: 10px 10px 0;
a source image to slice 
border-image: url("media/gradient.png") 10 10 0;

多個(gè)按鈕

hover & click 
But not impossible.
a source image to slice a source image to slice a source image to slice 
This one is tricky.

 參考文檔：www.lrbabe.com/sdoms/borderImage/

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

相關(guān)文章

  • 深入淺析css3 border-image邊框圖像詳解

    css3中新增了一個(gè)屬性 border-image ，這個(gè)屬性允許開(kāi)發(fā)者使用圖片來(lái)定義邊框,擴(kuò)充了 CSS2 中僅有的幾個(gè)預(yù)定義邊框樣式(border-style)。本文給大家介紹css3 border-image邊
    2015-11-24

  • 詳解CSS3中border-image的使用

    這篇文章主要介紹了詳解CSS3中border-image的使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-07-18

  • CSS3 border-image詳解、應(yīng)用及jQuery插件

    border-image可以說(shuō)是CSS3中的一員大將，將來(lái)一定會(huì)大放光彩，其應(yīng)用潛力真的是非常的驚人?？上壳爸С值臑g覽器有限，僅Firefox3.5，chrome瀏覽器，Safari3+支持border-i
    2011-08-29

  • 深入淺出CSS3 background-clip,background-origin和border-image教程

    最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔
    2011-01-27

  • css3圖片邊框border-image的用法

    在CSS3里引入的很多新特征中，這篇文章主要介紹了css3圖片邊框border-image的用法,具有一定的參考價(jià)值，有興趣的可以了解一下
    2017-06-30

最新評(píng)論