CSS3中新增边框属性4.ppt

《CSS3中新增边框属性4.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS3授课教师：陈艳网站教研组CSS3新增边框属性本章内容CSS1&2中的边框属性(W3C标准)CSS3新增的边框属性CSS3新增属性实例CSS3新增边框属性CSS1&2中的边框属性属性版本简介borderCSS1复合属性。设置对象边框的特性border-widthCSS1设置或检索对象边框宽度border-styleCSS1设置或检索对象边框样式border-colorCSS1设置或检索对象边框颜色border-topCSS1复合属性。设置对象顶边的特性border-top-widthCSS1设置或检索对象顶边宽度border-top-style

2、CSS1设置或检索对象顶边样式border-top-colorCSS1设置或检索对象顶边颜色border-rightCSS1复合属性。设置对象右边的特性border-right-widthCSS1设置或检索对象右边宽度border-right-styleCSS1设置或检索对象右边样式CSS3新增边框属性属性版本简介border-right-colorCSS1设置或检索对象右边颜色border-bottomCSS1复合属性。设置对象底边的特性border-bottom-widthCSS1设置或检索对象底边宽度border-bottom-styleCSS

3、1设置或检索对象底边样式border-bottom-colorCSS1设置或检索对象底边颜色border-leftCSS1复合属性。置对象左边的特性border-left-widthCSS1设置或检索对象左边宽度border-left-styleCSS1设置或检索对象左边样式border-left-colorCSS1设置或检索对象左边颜色CSS3新增边框属性CSS3新增的边框属性属性版本简介border-imageCSS3设置或检索对象的边框使用图像来填充border-image-sourceCSS3设置或检索对象的边框是否用图像定义样式或图像来源路

4、径border-image-sliceCSS3设置或检索对象的边框背景图的分割方式border-image-widthCSS3设置或检索对象的边框厚度border-image-outsetCSS3设置或检索对象的边框背景图的扩展border-image-repeatCSS3设置或检索对象的边框图像的平铺方式CSS3新增边框属性属性版本简介border-radiusCSS3设置或检索对象使用圆角边框border-top-left-radiusCSS3设置或检索对象左上角圆角边框border-top-right-radiusCSS3设置或检索对象右上角圆

5、角边框border-bottom-right-radiusCSS3设置或检索对象右下角圆角边框border-bottom-left-radiusCSS3设置或检索对象左下角圆角边框box-shadowCSS3设置或检索对象阴影box-reflectCSS3设置或检索对象的倒影CSS3新增边框属性border-image属性CSS3中新增的边框属性，扩充了原盒子模型的功能，使得边框具备背景图片属性。此前，border仅仅具备宽度、颜色和风格属性.实现边框背景图片属性，通常使用padding和background属性进行模拟，但是这样就为设置盒子的背景增

6、加了难度CSS3新增边框属性border-image语法语法格式：该语法为CSS缩写样式border-image：[border-image-source图片来源][border-image-slice分割方法][/[border-image-width边框宽度]?

7、/[border-image-outset扩展方式]][border-image-repeat重复方式]CSS3新增边框属性border-image-source语法说明：设置或检索对象的边框样式使用图像路径。指定一个图像用来替代border-style边框样式的属性。当border-i

8、mage为none或图像不可见时，将会显示border-style所定义的边框样式效果。对应的脚本特性为borderImageSource。取值：none：无背景图片。：使用绝对或相对地址指定图像。CSS3新增边框属性border-image-slice语法说明：设置或检索对象的边框背景图的分割方式。该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill。对应的脚本特性为borderImageSlice。取值：：用浮点数指定宽度。不允许

9、负值。<%>：用百分比指定宽度。不允许负值。CSS3新增边框属性border-image-width语法说明