一、CSS3 新增的边框属性
属性
版本
简介
border-image
CSS3
设置或检索对象的边框使用图像来填充
border-image-source
CSS3
设置或检索对象的边框是否用图像定义样式或图像来源路径
border-image-slice
CSS3
设置或检索对象的边框背景图的分割方式
border-image-width
CSS3
设置或检索对象的边框厚度
border-image-outset
CSS3
设置或检索对象的边框背景图的扩展
border-image-repeat
CSS3
设置或检索对象的边框图像的平铺方式
border-radius
CSS3
设置或检索对象使用圆角边框
border-top-left-radius
CSS3
设置或检索对象左上角圆角边框
border-top-right-radius
CSS3
设置或检索对象右上角圆角边框
border-bottom-right-radius
CSS3
设置或检索对象右下角圆角边框
border-bottom-left-radius
CSS3
设置或检索对象左下角圆角边框
box-shadow
CSS3
设置或检索对象阴影
box-reflect
CSS3
设置或检索对象的倒影
border-image
CSS3中新增的边框属性，扩充了原盒子模型的功能，使得边框具备背景图片属性。此前，border仅仅具备宽度、颜色和风格属性.
实现边框背景图片属性，通常使用padding和background属性进行模拟，但是这样就为设置盒子的背景增加了难度
 
语法格式：该语法为CSS缩写样式
 
border-image：
 
　　[border-image-source 图片来源 ]
　　　　说明：

　　　　　　设置或检索对象的边框样式使用图像路径。
　　　　　　指定一个图像用来替代border-style边框样式的属性。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
　　　　　　对应的脚本特性为borderImageSource。
　　　　取值：
　　　　　　none： 无背景图片。
　　　　　　none： 无背景图片。
　　　　　　<url>： 使用绝对或相对地址指定图像。 
　　　　　　<url>： 使用绝对或相对地址指定图像。
 
　   [ border-image-slice分割方法 ]
　　　　说明：

　　　　　　设置或检索对象的边框背景图的分割方式。
　　　　　　该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。
　　　　　　对应的脚本特性为borderImageSlice。 
　　　　取值：
　　　　　　<number>： 用浮点数指定宽度。不允许负值。
　　　　　　<%>： 用百分比指定宽度。不允许负值。
[
　　/ [ border-image-width边框宽度 ]? |
　　　　说明：

　　　　　　设置或检索对象的边框厚度。
　　　　　　该属性用于指定使用多厚的边框来承载被裁剪后的图像。
　　　　　　该属性可省略，由外部的border-width来定义。
　　　　　　对应的脚本特性为borderImageWidth。 
　　　　取值：
　　　　　　<length>： 用长度值指定宽度。不允许负值。
　　　　　　<percentage>： 用百分比指定宽度。不允许负值。
　　　　　　<number>： 用浮点数指定宽度。不允许负值。
　　　　　　auto： 如果auto值被设置，则border-image-width采用与border-image-slice相同的值。 
　　　　注意:该值得大小不会累加到盒子模型之上，chrome会有3像素的大小，其余浏览器border的大小依然为0
 
　　/ [border-image-outset 扩展方式 ]
　　　　说明：
　　　　　　置或检索对象的边框背景图的扩展。
　　　　　　该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示。
　　　　　　对应的脚本特性为borderImageOutset。
　　　　取值：
　　　　　　<length>： 用长度值指定宽度。不允许负值。
　　　　　　<number>： 用浮点数指定宽度。不允许负值。  
]
 
　　[ border-image-repeat重复方式 ]
 　　　　说明：

　　　　　　设置或检索对象的边框图像的平铺方式。
　　　　　　该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为         　　　　　　　stretch，则可省略不写。
　　　　　　对应的脚本特性为borderImageOutset。
 　　　　取值：
　　　　　　stretch： 指定用拉伸方式来填充边框背景图。
　　　　　　repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
　　　　　　round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果
　　　　　　space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。写本文档时尚无浏览器能看到该效果 
 
 
 
 
二、CSS3 新增属性实例
1、
<style>

    div{

        width:300px;

        height:300px;

        background:url(./shuaige.jpg) no-repeat center  ;

        border-image-source:none;

    }

</style>

</head>

<body>

    <div></div>

</body>

 2、

<style>

div{

    width:300px;

    height:300px;

    background:url(./shuaige.jpg) center no-repeat ;

    border-image-source:url(./border.png);/*边框图片属性*/

    border-image-width:27px;/*边框图片宽度属性*/

    border-image-slice:27;/*边框图片切割属性*/

    border-image-outset:0px;/*边框图片扩展属性*/

    border-image-repeat:stretch;/*边框图片重复属性*/

}

</style>

</head>

<body>

    <div>

    </div>

</body>
3、 
<style>

div{

    width:300px;

    height:300px;

    background:url(shuaige.jpg) no-repeat center;

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

    border-image-width:27px;

    border-image-slice:27;

    border-image-outset:0px;

    border-image-repeat:repeat;/*设定重复方式为重复*/

}

</style>

</head>

<body>

    <div>

    </div>

</body>

 4、

<style>

            div{

                width:300px;

                height:300px;

                background:url(shuaige.jpg) no-repeat center;

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

                border-image-width:27px;

                border-image-slice:27;

                border-image-outset:0px;

                border-image-repeat:round;/*设定重复方式为round   会看情况进行缩放或缩小*/

            }

        </style>

    </head>

    <body>

        <div>

        </div>

    </body>

5、

<style>

    div{

        width:300px;

        height:300px;

        background:url(./shuaige.jpg) center no-repeat ;

        border-image-source:url(./border.png);/*边框图片属性*/

        border-image-width:27px;/*边框图片宽度属性*/

        border-image-slice:27 fill;

        /*设定边框图片背景填充内容部分,会显示第5块切割的内容*/

        border-image-outset:0px;/*边框图片扩展属性*/

        border-image-repeat:stretch;/*边框图片重复属性*/

    }

</style>

</head>

<body>

    <div>

    </div>

</body>

 6、

<style>

    div{

        width:300px;

        height:300px;

        background:url(./shuaige.jpg) center no-repeat ;

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

        border-image-width:27px;

        border-image-slice:54;/*切割为宽度的2倍   会自动缩放*/

        border-image-outset:0px;

        border-image-repeat:stretch;

    }

</style>

</head>

<body>

<div>

</div>

</body>

7、

<style>

    div{

        width:300px;

        height:300px;

        background:url(./shuaige.jpg) center no-repeat ;

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

        border-image-width:27px;

        border-image-slice:81;/*切割为宽度的3倍*/

        border-image-outset:0px;

        border-image-repeat:stretch;

    }

</style>

</head>

<body>

<div>

</div>

</body>

8、

<style>

    div{

        width:300px;

        height:300px;

        background:url(./shuaige.jpg) center no-repeat ;

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

        border-image-width:27px;

        border-image-slice:27;

        border-image-outset:154px;/*向外扩展的大小*/

        border-image-repeat:repeat;

    }

</style>

</head>

<body>

<div>

</div>

</body>

CSS3的新增边框属性的更多相关文章

  1. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  2. CSS3新增的属性有哪些：

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  3. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  4. CSS3新增基础属性总结——20160409（易达客）

    1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...

  5. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  7. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  8. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  9. CSS自学笔记（11）:CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

随机推荐

  1. [转]使用C#进行图像处理的几种方法

    最近做监控图像由彩色变灰处理的时候发现图像处理过程中,很慢很慢代码如下: int Height = this.picInfo.Image.Height;                    int ...

  2. Maven配置私服仓库

    首先就是,最基本的打开maven的配置文件,上面是我自己的习惯,多留一个以备不坏 打开setting配置文件,来修改路径(本人不习惯将所有软件放在C盘,一般都是单独存放盘) 接下来就是公司给你的账户和 ...

  3. java设计模式-----10、享元模式

    Flyweight模式也叫享元模式,是构造型模式之一,它通过与其他类似对象共享数据来减小内存占用.它使用共享物件,用来尽可能减少内存使用量以及分享资讯给尽可能多的相似物件:它适合用于只是因重复而导致使 ...

  4. nodejs中创建web服务，监听本地IP

    nodejs官网例子 var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {' ...

  5. UVAlive6807 Túnel de Rata (最小生成树)

    题意 题目链接 Sol 神仙题Orz 我们考虑选的边的补集,可以很惊奇的发现,这个补集中的边恰好是原图中的一颗生成树: 并且答案就是所有边权的和减去这个边集中的边的权值: 于是我们只需要求最大生成树就 ...

  6. CSS属性display的浅略探讨

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

  7. cocos2d-x学习笔记--第一天记录

    1.环境安装 http://www.cocos2d-x.org/ ---下载2.2.3--解压 https://www.python.org/ ---2.7.6 系统环境变量 设置安装目录 2创建一个 ...

  8. asp.net mvc +easyui 实现权限管理（二）

    一写完后,好久没有继续写了.最近公司又在重新开发权限系统了,但是由于我人微言轻,无法阻止他们设计一个太监版的权限系统.想想确实是官大一级压死人啊, 没办法我只好不参与了 让他们去折腾. 我就大概说一下 ...

  9. android 自定义控件之ViewGroup生命周期执行步骤

    前言 了解ViewGroup的生命周期的执行步骤对于自己自定义ViewGroup的时候十分重要,清楚了整个流程才能对ViewGroup有更深的理解.本文从个人的总结,来阐述一下执行的顺序.执行说明 首 ...

  10. windows 设置CapsLock键开启大写后使用shift键取消大写

    1.打开控制面板——>时钟.语言和区域——>更改键盘或其它输入法——>更改键盘——>高级键设置——>要关闭Caps Lock 2.ok