CSS3边框.pptx

CSS3边框阚洪 khkanhong@常用的边框属性常用的边框相关属性设置：borderborder-color border-width border-styleborder-top border-left border-bottom border-rightborder-top-color border-top-style border-top-width边框线型属性值style中支持的属性值：none 无边框hidden 隐藏边框dotted 点线边框dashed 虚线边框solid 实线边框double 双线边框groove 3D凹槽边框ridge 3D凸槽边框inset 3D凹入边框outset3D凸出边框CSS3提供的渐变颜色边框-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;border-top-colors border-bottom-colorsborder-left-colors border-right-colors设置边框的宽度为Npx，就可以设置N种颜色，每种颜色显示1px的宽度。如果设置的颜色数小于边框的宽度，最后一个颜色覆盖剩下的宽度这个属性只有Firefox浏览器支持，而且使用时必须在前面加-moz-前缀。CSS3提供的圆角边框border-radius：属性值是设置圆角的半径，半径越大，圆角的程度越大。1个值：4个角都是这个半径2个值：第一个值表示左上角、右下角的半径，第二个值表示右上角、左下角的半径3个值：第一个值表示左上角的，第二个值表示右上角和左下角的，第三个值表示右下角的4个值：第一个左上角，第二个右上角，第三个右下角，第四个左下角border-top-left-radius border-top-right-radiusborder-bottom-right-radius border-bottom-left-radiusCSS3提供的图片边框border-image：有六大属性值，分别是：图片地址border-image-source、图片切割border-image-slice、图片宽度border-image-width、图片外凸border-image-outset、图片重复border-image-repeat图片地址border-image-source属性值：none | url(……)border:20px solid #000; border-image-source:url(images/border.png);图片切割border-image-slice属性值可指定1~4个数值或百分比。这4个数值用于控制如何对图片进行切割如：10 20 30 40 分别制定切割图片时上、右、下、左边框的像素。说明一下，这里设置属性值时不能添加单位。按这种切割方式，图片被切割成了9个区域，4个角和4条边，中间区域会被抛弃。如果要将中间区域显示出来增加fill后缀。 如： 10 20 30 40 fillfill值和两点注意fill值是一个可选属性值，假如指定这个值，那么中间区就会出现，假如不指定，那么中间区域就隐藏起来了！两点注意1、slice不允许设置负值，设置负值和设置大于盒子的高度或者宽度都被100%替代。2、slice切过的区域有可能会重叠，如果右切和左切的值之和≥盒子的宽度，那么顶部区域和底部区域为空白。边框图片宽度border-image-widthborder-image-width属性值可以指定1~4个像素值或百分比或数字（表示倍数，设置border-width的倍数），或者是auto。border:20px solid #000; //盒子边框宽度为20pxborder-image-source:url(border.png); border-image-width:27px 1 10% 27px; //边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，因此这些值将代替20px成为图片边框宽度。边框图片外凸border-image-outset属性值可以指定1~4个像素值或数字，分别代表图片边框上右下左向盒子外延伸的距离边框图片重复border-image-repeat默认值为stretch，拉伸覆盖repeat，平铺覆盖round ，取整平铺可同时指定2个值，分别表示横向、纵向覆盖方式。repeat与round区别round在平铺时，最后一个边框图片不能完全显示，且显示的区域不到图片的一半，就不显示最后一张，然后扩大前面的