一、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. Angular的表单组件

    创建表单元素 在上一节中,我们学习了如何创建一个组件login,现在将login改造一下, 在template中添加html表单元素,#usernameRef表示input元素id,如果想传递inpu ...

  2. 点击一个元素，触发另一个元素的click事件

  3. 在SQLSERVER中如何检测一个字符串中是否包含另一个字符串

    --当charindex返回值大于0时则包含 为0不包含 select CHARINDEX('456','123456')   SQL语句使用CHARINDEX函数,来测试一个字符串中是否包含另一个字 ...

  4. maven-shade-plugin 打包出错

    一般maven-shade-plugin 打包出错的原因都是因为jar包出错,一般使用mvn package -X 即可找出对应错误的jar包删除即可.我自己遇到的是打开自己打包完的jar包出错,整的 ...

  5. 高并发第十单:J.U.C AQS(AbstractQueuedSynchronizer) 组件:CountDownLatch. CyclicBarrier .Semaphore

    这里有一篇介绍AQS的文章 非常好: Java并发之AQS详解 AQS全名:AbstractQueuedSynchronizer,是并发容器J.U.C(java.lang.concurrent)下lo ...

  6. autofac初识

    在开始autofac时,有必要先了解两个关键词:“控制反转(IoC/Inverse Of Control)”与“依赖注入(DI/Dependence injection)”. 控制反转(IoC):它把 ...

  7. PHP中文件操作（2）-- 写文件

    1.fread — 读取文件(可安全用于二进制文件) 语法:string fread ( int $handle , int $length ) $filename = "aa.txt&qu ...

  8. js-权威指南学习笔记15

    第十五章 脚本化文档 1.文档对象模型DOM是表示和操作HTML和XML文档内容的基础API. 2.Document.Element.Text是Node的子类. 3.查询文档的一个或多个元素有如下方法 ...

  9. freecodecamp 基础算法题笔记

    数组与字符串的转化 字符串转化成数组 reverse方法翻转数组顺序 数组转化成字符串. function reverseString(str) { a= str.split("" ...

  10. 关于CSS重要知识点(1)

    1. 盒子模型 CSS处理网页内容时,会把每一个元素"放在"一个盒子里,也就是所谓的盒子模型. 盒子模型包括4部分:内容,内边距(padding),边框(border)和外边距(m ...