border-image简介

border-image是CSS3中的新特性。目前几乎所有的主流浏览器都已经支持该特性，详情请移步border-image的兼容性。

border-image属性及使用说明

border-image的属性有6个，分别为border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat。通常是使用简写，比如：

border-image:url(picture.jpg) 10 10 stretch

表示使用picture这张图片，这里的10是指图像的偏移量，stretch表示拉伸图像。

图片地址：border-image-source

  • 属性名称：border-image-source
  • 值：none | <image>

  • 初始值：none

    初始值为none，如果设置了初始值为none，那么盒子边框的值就会应用到border-style的值。下面是设置引入外部地址图片的代码：

.border-image{

  border:2px solid #ddd;

  border-image-source:url(picture.png);//调用picture图片

}

图片剪切：border-image-slice

  • 属性名称：border-image-slice
  • 值：[<number>|<percentage>]{1,4} && fill ?

  • 初始值：none

    第一值<number>是一个纯数字，如1，2，3….。第二值<percentage>是一个百分数，百分比作为单位。需要注意<number>是没有单位的，因为默认单位就是像素（px）了。{1,4}代表前面的数字至少出现一次，最多出现4次，如果不指定值，也不会报错，只不过这样的剪切就没有意义了。fill为可选属性值，假如指定，那么中间第九块不是透明块，假如不指定，那么为透明图片处理。

    border-image-slice用于制定图形的上部、右部、下部、左部的偏移量，它是按照九宫格的格式来把图像分为9个区域：四个角、四个边区和一个中间区域。其规则符合CSS普遍的方位规则（与margin，padding等或border-width方位规则一致），即上、右、下、左顺时针，再附上剪切的含义。

    九宫格的示意图：

    比如：border-image-slice:30% 35% 40% 30%; 示意可以用下图表示：
            

    比如：border-image-slice:27 27 27 27;示意可以用下图表示：
            

    结论：将图形划分为九个局域后，1、2、3和4局域的图形会根据盒子大小自动调整水平和垂直方向上的长度，5、6、7和8区域的图形调整由border-image-repeat的值决定，9局域会双向拉伸（同时也受fill的影响）。
    验证结论的代码：

<!DOCTYPE html>

<html>

<head>

<style>

    #sn{

      width:139px;

      height:139px;

      border:27px solid gray;

    }

    #sn1{

    width:81px;

    height:81px;

    border:27px solid gray;

    -moz-border-image: url(border.png) 13 27 27; /* Old Firefox */

    -webkit-border-image: url(border.png) 13 27 27; /* Safari */

    -o-border-image: url(border.png) 13 27 27; /* Opera */

    border-image:url(border.png) 13 27 27;

    }

    #sn2{

      width:27px;

      height:27px;

      border:27px solid gray;

      }

</style>

</head>

<body>

<div id="sn"><div id="sn1"><div id="sn2"></div></div></div>

</body>

</html>

”-o-border-image、-moz-border-image和-webkit-border-image”是让不支持该属性的浏览器兼容，读者可以根据自己的需要自行设置。

代码运行结果：

边宽图像宽度：border-image-width

  • 属性名称: border-image-width
  • 属性值：[<number>|<percentage>|<length>][1,4]

  • 初始值：1

    border-image-width的作用就是代替盒子本身的边框宽度border-width。假如指定，那么边框图片宽度就由border-image-width来确定，假如不指定，那么图片边框宽度就由border-width来确定。border-image-width可以用具体像素、数字（表示几倍）和百分比来表示，最少1个值，最多4个值，分别代表上右下左图片边框宽度。

.border-image{

  border:27px solid gray;

  border-image-source:url(border.png);

  border-image-slice:27;

  border-image-width:27px 1 10% 10px;//边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，因此这些值将代替20px成为图片边框宽度。

}

边框图片外凸border-image-outset

  • 属性名称：border-image-outset
  • 值： [ <length> | <number> ]{1,4}

  • 初始值：0

    border-image-outset的作用就让边框背景延伸到盒子外。有两个属性值length和number，前者是具体的像素单位，后者是数字，最少1个值，最多4个，分别代表上右下左图片边框向外延伸的距离。

.border-image{

            border:27px solid #000;  //盒子边框宽度为27px

            border-image-source:url(border.png);

            border-image-outset:27px 27px 27px 27px; //边框图片向设置为27px，那么背景图将会从盒子最外边界向外上右下左各延伸27px。

}

效果图：

边框图片重复border-image-repeat

  • 属性名称：border-image-repeat
  • 值：[<stretch>|<round>|<repeat>][1,2]

  • 初始值：stretch

    border-image-repeat可以设置边框图片的重复类型，其默认值为stretch，是拉伸的意思，4个角4个区域分别做水平和垂直方向的拉伸，来填补边框的间隙；repeat是就是让4个角4个区域做完水平和垂直方向的复制图像，把边框之间的空隙填满；而round[环绕]是把4个角和4个区域分成均等区域，然后用背景图片切好能铺满整个边框空隙，不能多也不能少，正好合适。

.border-image-stretch{

    border:27px solid #000;

    border-image-source:url(picture.png);

    border-image-slice:27 27 27 27;

    border-image-repeat:stretch;

}/*拉伸*/

.border-image-round{

    border:27px solid #000;

    border-image-source:url(picture.png);

    border-image-slice:27 27 27 27;

    border-image-repeat:round;

}/*环绕*/

.border-image-repeat{

    border:27px solid #000;

    border-image-source:url(picture.png);

    border-image-slice:27 27 27 27;

    border-image-repeat:repeat;

}/*重复*/

效果图：

border-image的一些实例

圆角效果

效果展示：

使用图片：

使用代码：

      #exp{

        width:80px;

        border:2px solid transparent;

        border-image:url(rounded_corner.png);

        border-image-slice:5;

        border-image-outset:2px;

        background:gray;

        color:white;

      }

多边框效果

效果展示：

使用图片：

使用代码：

      #nexp{

        width:100px;

        border:10px solid gray;

        border-image:url(border_round.png);

        border-image-slice:20;

        background:white;

        color:gray;

      }

选项卡效果

效果展示：

使用图片：

使用代码：

     #nche{

        width:100px;

        border-style:solid;

        border-width:5px 5px 0px;

        boder-color:gray;

        border-image:url(border_tab.png) 5 5 0 fill;

        text-align:center;

      }

投影效果

效果展示：

使用图片：

使用代码：

<!DOCTYPE html>

<html>

<head>

<style>

   #pche{

      border-style:solid;

      border-width:2px 5px 6px 2px;

      border-image:url(border_shade.png) 2 5 6 2;

      border-color:orange;

    }

</style>

</head>

<body>

    <img src="mm1.jpg" id="pche">

</body>

</html>

参考文章

张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]http://www.360doc.com/content/14/1016/13/2792772_417403574.shtml

【CSS3】CSS3：border-image的详解和实例的更多相关文章

  1. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  2. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  3. XML参考 ：XmlReader 详解、实例

    XML参考 :XmlReader 详解.实例-- 详解 转:http://www.cnblogs.com/Dlonghow/archive/2008/07/28/1252191.html XML参考 ...

  4. Protocol Buffer技术详解(Java实例)

    Protocol Buffer技术详解(Java实例) 该篇Blog和上一篇(C++实例)基本相同,只是面向于我们团队中的Java工程师,毕竟我们项目的前端部分是基于Android开发的,而且我们研发 ...

  5. Protocol Buffer技术详解(C++实例)

    Protocol Buffer技术详解(C++实例) 这篇Blog仍然是以Google的官方文档为主线,代码实例则完全取自于我们正在开发的一个Demo项目,通过前一段时间的尝试,感觉这种结合的方式比较 ...

  6. Java学习-007-Log4J 日志记录配置文件详解及实例源代码

    此文主要讲述在初学 Java 时,常用的 Log4J 日志记录配置文件详解及实例源代码整理.希望能对初学 Java 编程的亲们有所帮助.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:20 ...

  7. groupadd命令详解（实例）

     groupadd命令详解(实例)  1.作用groupadd命令用于将新组加入系统. 2.格式groupadd [-g gid] [-o]] [-r] [-f] groupname 3.主要参数-g ...

  8. GLSL-几何着色器详解跟实例（GS：Geometry Shader）[转]

    [OpenGL4.0]GLSL-几何着色器详解和实例(GS:Geometry Shader) 一.什么是几何着色器(GS:Geometry Shader) Input Assembler(IA)从顶点 ...

  9. CvMat、Mat、IplImage之间的转换详解及实例

    见原博客:http://blog.sina.com.cn/s/blog_74a459380101obhm.html OpenCV学习之CvMat的用法详解及实例 CvMat是OpenCV比较基础的函数 ...

  10. C语言操作WINDOWS系统存储区数字证书相关函数详解及实例

     C语言操作WINDOWS系统存储区数字证书相关函数详解及实例 以下代码使用C++实现遍历存储区证书及使用UI选择一个证书 --使用CertOpenSystemStore打开证书存储区. --在循环中 ...

随机推荐

  1. javascript运算符——关系运算符

    × 目录 [1]恒等 [2]相等 [3]大于[4]小于 前面的话 关系运算符用于测试两个值之间的关系,根据关系是否存在而返回true或false,关系表达式总是返回一个布尔值,通常在if.while或 ...

  2. IIS负载均衡(转)

    在大型Web应用系统中,由于请求的数据量过大以及并发的因素,导致Web系统会出现宕机的现象,解决这一类问题的方法我个人觉得主要在以下几个方面: 1.IIS 负载均衡. 2.数据库 负载均衡. 3.系统 ...

  3. HTML5移动Web开发（八）——避免文本字体大小重置

    适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...

  4. TortoiseSVN安装以及淘宝 TAE SDK 开发环境的搭建

    一.TortoiseSVN 的下载和安装 1.进入TortoiseSVN 官网下载地址http://tortoisesvn.net/downloads.html,根据自己的操作系统位数下载相应最新版本 ...

  5. Deep learning：四十二(Denoise Autoencoder简单理解)

    前言: 当采用无监督的方法分层预训练深度网络的权值时,为了学习到较鲁棒的特征,可以在网络的可视层(即数据的输入层)引入随机噪声,这种方法称为Denoise Autoencoder(简称dAE),由Be ...

  6. selenium-webdriver(python) (十六) --unittest 框架

    学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试(一)----selen ...

  7. Elasticsearch——多索引的使用

    在Elasticsearch中,一般的查询都支持多索引. 只有文档API或者别名等不支持多索引操作,因此本篇就翻译一下多索引相关的内容. 首先,先插入几条数据: $ curl -XPOST local ...

  8. Android SDK Manager国内更新代理

    在Android SDK Manager Setting 窗口设置HTTP Proxy server和HTTP Proxy Port这个2个参数,分别设置为: HTTP Proxy server:mi ...

  9. 【转载】[jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证

    最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示: 项目采用的jquery.validate.js验证组件,目前组件不支持这种“或”逻辑的验证,于是就自己定义一个 jQuery ...

  10. Web API应用架构在Winform混合框架中的应用（5）--系统级别字典和公司级别字典并存的处理方式

    在我这个系列中,我主要以我正在开发的云会员管理系统为例进行介绍Web API的应用,由于云会员的数据设计是支持多个商家公司,而每个公司又可以包含多个店铺的,因此一些字典型的数据需要考虑这方面的不同.如 ...