资源预览内容
第1页 / 共13页
第2页 / 共13页
第3页 / 共13页
第4页 / 共13页
第5页 / 共13页
第6页 / 共13页
第7页 / 共13页
第8页 / 共13页
第9页 / 共13页
第10页 / 共13页
亲,该文档总共13页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
CSS边框属性,CSS边框属性,边框风格属性(border-style) 这个属性用来设定上下左右边框的风格,它的值如下: none (没有边框,无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框) 演示示例:分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例, 边框风格属性 border-style .d1 border-style:none; .d2 border-style:solid; .d3 border-style:dotted; .d4 border-style:dashed; .d5 border-style:double; .d6 border-style:groove; .d7 border-style:ridge; .d8 border-style:inset; .d9 border-style:outset; , 这个div的CSS边框风格(border-style)属性缺省值是none。 这个div的CSS边框风格(border-style)属性是none。 这个div的CSS边框风格(border-style)属性是solid。 这个div的CSS边框风格(border-style)属性是dotted。 这个div的CSS边框风格(border-style)属性是dashed。 这个div的CSS边框风格(border-style)属性是double。 这个div的CSS边框风格(border-style)属性是groove。 这个div的CSS边框风格(border-style)属性是ridge。 这个div的CSS边框风格(border-style)属性是inset。 这个div的CSS边框风格(border-style)属性是outset。 ,边框宽度属性(border-width) 这个属性用来设定上下左右边框的宽度,它的值如下: medium (是缺省值) thin (比medium细) thick (比medium粗) 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。 演示示例:分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例, 边框宽度 border-width .d1 border-style:solid; .d2 border-width:thin;border-style:solid; .d3 border-width:thick;border-style:solid; .d4 border-width:10px;border-style:solid; .d5 border-width:5mm;border-style:solid; 这个div的CSS边框宽度(border-width)属性缺省值是medium。 这个div的CSS边框宽度(border-width)属性值是thin。 这个div的CSS边框宽度(border-width)属性值是thick。 这个div的CSS边框宽度(border-width)属性值是10px。 这个div的CSS边框宽度(border-width)属性值是5mm。 ,边框颜色属性(border-color) 这个属性用来设定上下左右边框的颜色。例句如下: .d5 border-color:gray;border-style:solid; 看案例:, 边框颜色属性 border-color .d1 border-color:#FFA500;border-style:solid; .d2 border-color:#33CC00;border-style:solid; .d3 ;border-color:#6600FF;border-style:solid; .d4 border-color:#FF6347;border-style:solid; .d5 border-color:gray;border-style:solid; 这个div的CSS边框颜色(border-color)属性值是橙色。 这个div的CSS边框颜色(border-color)属性值是绿色。 这个div的CSS边框颜色(border-color)属性值是蓝色。 这个div的CSS边框颜色(border-color)属性值是番茄红。 这个div的CSS边框颜色(border-color)属性值是灰色。 ,边框属性(border) 这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下: .d1 border:5px solid gray; 看案例:, 边框属性 border .d1 border:5px solid gray; 这个div的边框属性:边框宽度(border-width)为5px;边框风格(border-style)为直线式;边框颜色为灰色。 ,单边边框属性 上下左右四个边框不但可以统一设定,也可以分开设定。 设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。 设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。 设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。 设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。 看案例:, 单个边框属性 .d1 border-top:5px solid #FF0000 .d2 border-bottom:5px solid #FF0000 .d3 border-left:5px solid #FF0000 .d4 border-right:5px solid #FF0000 单个边框属性: 设置上边框用border-top 设置下边框用border-bottom 设置左边框用border-left 设置右边框用border-right ,END,
收藏 下载该资源
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号