15CSS3中新增边框属性摘要.ppt

内容 CONTENTS — * — — * — — * — 网页设计与制作——HTML5+CSS+JavaScript CSS3新增边框属性 夏　瑜 博士、副教授 E_Mail：csit_xiayu@163.com 计算机科学与工程学院 CSS3新增边框属性 本章内容 CSS12中的边框属性(W3C标准) CSS3 新增的边框属性 CSS3 新增属性实例 CSS3新增边框属性 CSS12中的边框属性 属性 版本 简介 border CSS1 复合属性。设置对象边框的特性 border-width CSS1 设置或检索对象边框宽度 border-style CSS1 设置或检索对象边框样式 border-color CSS1 设置或检索对象边框颜色 border-top CSS1 复合属性。设置对象顶边的特性 border-top-width CSS1 设置或检索对象顶边宽度 border-top-style CSS1 设置或检索对象顶边样式 border-top-color CSS1 设置或检索对象顶边颜色 border-right CSS1 复合属性。设置对象右边的特性 border-right-width CSS1 设置或检索对象右边宽度 border-right-style CSS1 设置或检索对象右边样式 CSS3新增边框属性 属性 版本 简介 border-right-color CSS1 设置或检索对象右边颜色 border-bottom CSS1 复合属性。设置对象底边的特性 border-bottom-width CSS1 设置或检索对象底边宽度 border-bottom-style CSS1 设置或检索对象底边样式 border-bottom-color CSS1 设置或检索对象底边颜色 border-left CSS1 复合属性。置对象左边的特性 border-left-width CSS1 设置或检索对象左边宽度 border-left-style CSS1 设置或检索对象左边样式 border-left-color CSS1 设置或检索对象左边颜色 CSS3新增边框属性 CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像定义样式或图像来源路径 border-image-slice CSS3 设置或检索对象的边框背景图的分割方式 border-image-width CSS3 设置或检索对象的边框厚度 border-image-outset CSS3 设置或检索对象的边框背景图的扩展 border-image-repeat CSS3 设置或检索对象的边框图像的平铺方式 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 设置或检索对象的倒影 CSS3新增边框属性 border-image属性 CSS3中新增的边框属性，扩充了原盒子模型的功能，使得边框具备背景图片属性。 此前，border仅仅具备宽度、颜色和风格属性. 实现边框背景图片属性，通常使用padding和background属性进行模拟，但是这样就为设置盒子的背景增加了难度 CSS3新增边框属性 border-image语法 语法格式：该语法为CSS缩写样式 border-image： [border-image-source 图片来源 ] [ border-image-slice分割方法 ] [ / [ border-image-width边框宽度 ]? | / [border-image-outset 扩展方式 ] ] [ border-image-repeat重复方式 ] CSS3新增边框属性 border-image-source 语法 说明： 设置或检索对象的边框样式使用图像路径。 指定一个图像用来替代border-style边框样式的属性。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。