css3的边框新增加的特性怎么使用

本篇内容主要讲解“css3的边框新增加的特性怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3的边框新增加的特性怎么使用”吧! css3边框新增加的特性有：border-radius、border-image、border-image-outset、border-image-repeat、border-image-slice、border-image-width等。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3的边框新增加的特性（属性）border-imageCSS3中新增的边框属性，扩充了原盒子模型的功能，使得边框具备背景图片属性。此前，border仅仅具备宽度、颜色和风格属性.实现边框背景图片属性，通常使用padding和background属性进行模拟，但是这样就为设置盒子的背景增加了难度语法格式： 该语法为 免费云主机、域名CSS 缩写样式 border-image：　　 [border-image-source 图片来源 ]　　　　 说明： 　　　　　　设置或检索对象的边框样式使用图像路径。　　　　　　指定一个图像用来替代border-style边框样式的属性。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。　　　　　　对应的脚本特性为borderImageSource。　　　　取值： 　　　　　　none： 无背景图片。　　　　　　none： 无背景图片。　　　　　　： 使用绝对或相对地址指定图像。　　　　　　： 使用绝对或相对地址指定图像。　 [ border-image-slice分割方法 ]　　　　 说明： 　　　　　　设置或检索对象的边框背景图的分割方式。　　　　　　该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。　　　　　　对应的脚本特性为borderImageSlice。　　　　取值： 　　　　　　： 用浮点数指定宽度。不允许负值。　　　　　　： 用百分比指定宽度。不允许负值。[ / [ border-image-width边框宽度 ]? | 　　　　 说明： 　　　　　　设置或检索对象的边框厚度。　　　　　　该属性用于指定使用多厚的边框来承载被裁剪后的图像。　　　　　　该属性可省略，由外部的border-width来定义。　　　　　　对应的脚本特性为borderImageWidth。　　　　取值： 　　　　　　： 用长度值指定宽度。不允许负值。　　　　　　： 用百分比指定宽度。不允许负值。　　　　　　： 用浮点数指定宽度。不允许负值。　　　　　　auto： 如果auto值被设置，则border-image-width采用与border-image-slice相同的值。　　　　 注意:该值得大小不会累加到盒子模型之上，chrome会有3像素的大小，其余浏览器border的大小依然为0 　　/ [border-image-outset 扩展方式 ] 　　　　说明： 　　　　　　置或检索对象的边框背景图的扩展。　　　　　　该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示。　　　　　　对应的脚本特性为borderImageOutset。　　　　取值： 　　　　　　： 用长度值指定宽度。不允许负值。　　　　　　： 用浮点数指定宽度。不允许负值。] 　　[ border-image-repeat重复方式 ]　　　　 说明： 　　　　　　设置或检索对象的边框图像的平铺方式。　　　　　　该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为 　　　　　　　stretch，则可省略不写。　　　　　　对应的脚本特性为borderImageOutset。　　　　 取值： 　　　　　　stretch： 指定用拉伸方式来填充边框背景图。　　　　　　repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。　　　　　　round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果　　　　　　space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。写本文档时尚无浏览器能看到该效果CSS3 新增属性实例
1、 2、3、 4、5、 6、7、8、到此，相信大家对“css3的边框新增加的特性怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: 如何实现类似facebook无刷新ajax更新

这篇文章主要介绍了如何实现类似facebook无刷新ajax更新，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 代码如下: update_profile_ajax.php 代码如下: