一、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. MySQL3：存储过程和函数

    什么是存储过程 简单说,存储过程就是一条或多条SQL语句的集合,可视为批文件,但是起作用不仅限于批处理.本文主要讲解如何创建存储过程和存储函数以及变量的使用,如何调用.查看.修改.删除存储过程和存储函 ...

  2. 深入理解MyBatis的原理（三）：配置文件用法（续）

    前言:前文讲解了 MyBatis 的配置文件一部分用法,本文将继续讲解 MyBatis 的配置文件的用法. 目录 1.typeHandler 类型处理器 2.ObjectFactory 3.插件 4. ...

  3. angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

  4. RxJava重温基础

    RxJava是什么 a library for composing asynchronous and event-based programs using observable sequences f ...

  5. windows 删除删除不掉的文件

    DEL /F /A /Q \\?\%1RD /S /Q \\?\%1 windows下删除删除不掉的文件: 1.打开记事本,把上面的命令复制进去 2.保存,后缀名改为.bat,ok 3.把想要删除的文 ...

  6. ui-sref的参数传递

    例如:路由配置如下: $stateProvider.state('admin.userList', { url: '/listUser?type&role', //参数必须先在这边声明 tem ...

  7. logback.xml配置示例

    需要的jar如下: <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api< ...

  8. pjax 和 ajax 的区别

    pjax 是一个 jQuery 插件,它通过 ajax 和 pushState 技术提供了极速的(无刷新 ajax 加载)浏览体验,并且保持了真实的地址.网页标题,浏览器的后退(前进)按钮也可以正常使 ...

  9. Asp.net mvc Kendo UI Grid的使用(二)

    上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...

  10. WinForm自定义控件

        [ToolboxBitmap(typeof(PropertyGrid))]//设置在工具箱中显示的小图标 public partial class ServiceManage : UserCo ...