一、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. synchronized实现可见性

    JMM关于synchronized的两条规定: 1)线程解锁前,必须把共享变量的最新值刷新到主内存中 2)线程加锁时,将清空工作内存中共享变量的值,从而使用共享变量时需要从主内存中重新获取最新的值 ( ...

  2. eclipse/myEclipse 代码提示和快捷键

    一.设置自动提示 设置eclipse/myEclipse代码提示可以方便开发者,不用在记住拉杂的单词,只用打出首字母,就会出现提示代码菜单. 1.菜单window->Preferences-&g ...

  3. FOR XML PATH做为数据表中单列或者多列的字符串拼接的方法，放到一列中去，很好用。

    先看看自己弄得例子,SELECT sName+',',hoppy+','  FROM student2 where hoppy='游泳' FOR XML PATH('')--PATH后面跟的是行标题, ...

  4. HTTP2 帧基础知识以及Header、CONTINUATION、DATA帧相关资料：

    HTTP2于2015年2月28日正式通过IETF组织批准发布,正式定稿.有关它的内容可以参考:  HTTP2 概述  http://www.cnblogs.com/ghj1976/p/4552583. ...

  5. java设计模式-----15、适配器模式

    概念: Adapter模式也叫适配器模式,是构造型模式之一,通过Adapter模式可以改变已有类(或外部类)的接口形式. 举个例子:我们使用电脑,家里的电源是220V的,而我们的电脑是18V的,这时如 ...

  6. Implementation：Dijkstra

    #include <iostream> #include <cstdlib> #include <utility> #include <queue> u ...

  7. 新项目找不到Angular-cli.json文件

    新项目找不到Angular-cli.json文件 Angular-cli.json文件是Angular5中cli的相关配置信息. 今天创建了新Angular项目后突然发现Angular-cli.jso ...

  8. hibernate、java、数据库对应类型

    引自 https://my.oschina.net/heau/blog/498874 java.数据库对应类型 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述     ...

  9. Reducing and Profiling GPU Memory Usage in Keras with TensorFlow Backend

    keras 自适应分配显存 & 清理不用的变量释放 GPU 显存 Intro Are you running out of GPU memory when using keras or ten ...

  10. OkHttp2.0有Bug，暂时不推荐在产品中使用

    版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4078137.html 之前在博客里推荐使用OkHttp来替换 ...