zoukankan      html  css  js  c++  java
  • CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image。有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的东东。


    一、border-image的语法


    1、border-image-source

    border-image-source:url(image);/*image可以是相对地址也可以是绝对地址*/

    border-image-source跟CSS2中background-image属性相似,也是通过url()调用背景图片,图片的路径可以是相对地址也可以是绝对地址,当然你不想使用背景图片你也可以把值设置为none,即:border-image:none;其默认值就是none。


    2、border-image-slice

    border-image-slice: number(数字) || percentage(百分比)

    border-image-slice是用来分解引入进来的背景图片,这个参数相对来说比较复杂和特别


    (1)其取值支持:


    I、number

    number 专指像素px,因为其默认的单位就是像素px,所以在使用number时不需要加上单位,如果加上了单位反而是错误的写法。


    II、percentage

    Percentage指百分比的值,这个值是相对于边框背景图片而言的,例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%,那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小。百分比的值类似于我们border-width的取值方式,也是遵从top,right,bottom,left的规则。


    (2)剪切的特性


             在border-image中slice是一个关键部分,也是让人难以理解的部分。如果你用过CSS3中的clip属性,那么在理解border-image-slice来说相对会轻松一些。border-image-slice虽然表意上说不是剪切,但在我们实际应用中他就是一种纯粹的剪切,他把我们通过border-image-source取到的图片切成了九份,在像background-image一样重新布置。前面我们说了他有1~4个参数,类似于border-width的方位规则,在把剪切到的图片重新分布给他们。


    3、border-image-width

    border-image- number(数字) || percentage(百分比) 

    border-image-width就是border-width,用来设置边框的宽度,我们也可以直接用border-width来代替border-image-width的。


    4、border-image-repeat

    border-image-repeat: round(平铺) || repeat(重复) || rtretch(拉伸)

    border-image-repeat是用来指定border-image的排列方式,这个属性设置参数和其他的不一样,border-image-repeat不遵循top,right,bottom,left的方位原则,他只接受两个(或一个)参数值,第一个表示水平方向,第二个表示垂直方向;当取值为一个值时,表示水平和垂直方向的排列方式相同。同时其默认值是stretch(拉伸),如果你省略不取值时,那么水平和垂直方向都是以stretch(拉伸)排列。参数值有:Round(平铺)、Repeat(重复)、Stretch(拉伸)。


    5、border-image的综合写法

    border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)

    二、border-image的兼容


    1、border-image的兼容情况


    梦龙小站


    2、border-image的兼容写法

    /*Mozilla内核Firefox*/
    -moz-border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
    /*Webkit内核Safari and Chrome*/
    -webkit-border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
    /*Opera*/
    -o-border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)
    /*W3C标准*/
    border-image: border-image-source(图片的路径) || border-image-slice(剪切的位置) || border-image-width(边框的宽度) || border-image-repeat(排列方式)

    三、border-image的例子(在谷歌浏览器下预览哟)


    1、Round(平铺)效果


    CSS代码:

    div{  240px; height:240px; border: 40px solid orange;
         -webkit-border-image: url("http://www.leemagnum.com/img/d.png") 40 round ;
    }
    
    /*
        1、若是单方向的平铺只需要把排列方式改成横向和竖向的两部分即可
        2、round(平铺)会压缩或伸展border-image的背景图片以其刚好适应border-width的宽度
    */

    HTML代码:

    <div>梦龙小站</div>

    预览效果:

    梦龙小站


    2、Repeat(重复)效果


    CSS代码:

    div{  240px; height:240px; border: 40px solid orange;
         -webkit-border-image: url("http://www.leemagnum.com/img/d.png") 40 repeat;
    }
    
    /*
        1、若是单方向的重复只需要把排列方式改成横向和竖向的两部分即可
        2、repeat(重复)不管宽度适合不适合,直接居中重复
    */

    HTML代码:

    <div>梦龙小站</div>

    预览效果:

    梦龙小站


    3、Stretch(拉伸)效果


    CSS代码:

    div{  240px; height:240px;border: 40px solid orange;
         -webkit-border-image: url("http://www.leemagnum.com/img/d.png") 40 stretch;
    }
    /*
        1、若是单方向的重复只需要把排列方式改成横向和竖向的两部分即可
        2、stretch(拉伸)只是把中间剩下的图片拉伸到适应的宽高
    */

    HTML代码:

    <div>梦龙小站</div>

    预览效果:

    梦龙小站


    4、相框效果


    CSS代码:

    div{148px; height:148px;border:20px solid orange;
         -webkit-border-image: url("http://www.leemagnum.com/img/a.png") 10 stretch;
    }

    HTML代码:

    <div>
    	<img src="http://justflyhigh.com/img/front/erweima.png" alt="IT部落阁" />
    </div>

    预览效果:

    梦龙小站


    5、圆角效果


    CSS代码:

    div {
      border- 10px;
      -webkit-border-image: url("http://www.leemagnum.com/img/a.jpg") 10;
      200px;
      height:300px;
    }

    HTML代码:

    <div>梦龙小站</div>

    预览效果:

    梦龙小站


    CSS3之边框图片border-image就介绍到这里了,不知道大家看明白了么?若不明白的话欢迎大家在下面评论,咱们一起研究研究。若有更好的CSS3之边框图片border-image的案例欢迎分享哟。


  • 相关阅读:
    软件测试—— junit 单元测试
    falut error failure 的区别与理解
    错误的反思
    只能在微信浏览器打开的链接,如何查看源码
    PHPManage for IIS Windows 10
    wamp mysql配置
    CSS Flexbox 学习指南、工具与框架
    Android SDK 在线更新镜像服务器资源
    64位win2003 IIS6运行32位的.NET程序
    让服务器iis支持.apk文件下载的设置方法
  • 原文地址:https://www.cnblogs.com/pangblog/p/3366097.html
Copyright © 2011-2022 走看看