《CSS边框属性》PPT课件.ppt

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 borde