一、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. ASP.Net ListBox DropdownList 不同条目设置背景色和字体颜色（ 转· 载 ）

    ASP.Net ListBox DropdownList 不同条目设置背景色和字体颜色 2009-09-30  来自:真有意思 [ZU14.CN]  字体大小:[大 中 小] 摘要:在HTML展现页面 ...

  2. vue+SSM验证码实现

    源码:https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master 1 ...

  3. Linux下socket通信和多线程

    服务端socket流程:socket() –> bind() –> listen() –> accept() –> 读取.发送信息(recv,send等) 客户端socket流 ...

  4. mac 下mongodb connect failed 连接错误

    我是用brew install mongod 安装的 MongoDB shell version v3.4.2connecting to: mongodb://127.0.0.1:270172017- ...

  5. c#winform中如何修改ListView控件每个单元格的颜色

    ListView在View属性为Details的时候它呈现的方式和DataGirdView差不多,它的每一行都是一个ListViewItem,然而每个ListViewItem都有一个BackColor ...

  6. 线上Bug修复流程

  7. opencv图像处理时使用stringstream批量读取图片，处理后并保存

    简介: 同文件输入输出流一样,使用stringstream可以批量读取图片,处理后并进行保存.因为C++中头文件 stringstream既可以从string读数据也可向string写数据,利于其这个 ...

  8. AJAX跨域访问（从Tomcat8到Apache/Nginx/Spring Boot）

    1.在Tomcat的Root目录下放入如下的文件 apache-tomcat-8.0.12X64\webapps\ROOT clientaccesspolicy.xml文件 <?xml vers ...

  9. Android上实现视频录制

    首先,我们肯定要用到摄像头,因此需要在Manifest文件中声明使用权限: <uses-permission android:name="android.permission.CAME ...

  10. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div> <div style="color:#f ...