css3边框(border)模型.pptxVIP

CSS3 边框(border)模型css3hack因为css3并不是所有的浏览器都支持，有些浏览 器虽然支持，但是效果也不是很好，所以这些浏 览器在支持这些新特性的时候，给这些属性加入 自己的厂名，等到css3标准化后再将厂名去掉， 比方说：对于圆角的支持:.box_round {-moz-border-radius: 30px; /* FF1+ */-o-border-radius: 30px;/* opera */-webkit-border-radius: 30px; /* Saf3+, Chrome */border-radius: 30px; /* Opera 10.5, IE 9 */}CSS3边框通过 CSS3，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 -不再需使用设计软件，比如 PhotoShop，来做这些效果，能够很轻松的在页 面当中做出圆角，阴影等效果CSS3边框浏览器支持情况属性 浏览器支持border-radius Internet Firefox Chrome SafariExplorer 9+box-shadow Internet Firefox Chrome SafariExplorer 9+border-image Firefox Chrome Safari属性border-radiusCSS3边框box_round {-moz-border-radius: 30px; /* FF1+ */-o-border-radius: 30px;/* opera */-webkit-border-radius: 30px; /* Saf3+, Chrome*/border-radius: 30px; /* Opera 10.5, IE 9 */}注释：按此顺序设置每个 radius的四个值。如果省略 bottom-left，则与top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略top-right，则与 top-left 相同。值 描述length 定义圆角的半径% 以百分比定义圆角的形状。属性box-shadowCSS3边框.box_shadow {-moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */-webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */-ms-filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=#ffffff); /* IE8 */}-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的，都有4个参数，含义分别为：x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。IE 6~8使用其独有的滤镜，需要设置三个参数：offX（X轴偏移值）、offY（Y轴偏移值）、Color（阴影颜色）。属性border-imageCSS3边框div{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;/* Opera */}浏览器支持Firefox、Chrome 以及 Safari 6 支持 border-image 属性。Opera 支持替代的 -o-border-image 属性。Safari 5 支持替代的 -webkit-border-image 属性。属性border-imageCSS3边框值 描述border-image-source 用在边框的图片的路径。border-image-slice 图片边框向内偏移。border-image-width 图片边框的宽度。border-image-outset 边框图像区域超出边框的量。border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。