CSS边框属性课件

1、CSS边框属性PPT课件CSS边框属性CSS边框属性PPT课件CSS边框属性边框风格属性(border-style)这个属性用来设定上下左右边框的风格，它的值如下：none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框)演示示例：分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的C

2、SS边框风格属性示例CSS边框属性PPT课件边框风格属性 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;CSS边框属性PPT课件这个这个div的的CSS边框风格边框风格(border-style)属

3、性缺省值是属性缺省值是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。这个这个d

4、iv的的CSS边框风格边框风格(border-style)属性是属性是ridge。这个这个div的的CSS边框风格边框风格(border-style)属性是属性是inset。这个这个div的的CSS边框风格边框风格(border-style)属性是属性是outset。CSS边框属性PPT课件 边框宽度属性(border-width) 这个属性用来设定上下左右边框的宽度，它的值如下： medium (是缺省值) thin (比medium细) thick (比medium粗) 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

5、演示示例：分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例CSS边框属性PPT课件边框宽度边框宽度 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)

6、属性缺省值是属性缺省值是medium。这个这个div的的CSS边框宽度边框宽度(border-width)属性值是属性值是thin。这个这个div的的CSS边框宽度边框宽度(border-width)属性值是属性值是thick。这个这个div的的CSS边框宽度边框宽度(border-width)属性值是属性值是10px。这个这个div的的CSS边框宽度边框宽度(border-width)属性值是属性值是5mm。CSS边框属性PPT课件 边框颜色属性(border-color) 这个属性用来设定上下左右边框的颜色。例句如下： .d5 border-color:gray;border-style:

7、solid;看案例：CSS边框属性PPT课件边框颜色属性边框颜色属性 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)属

8、性值是橙色。属性值是橙色。这个这个div的的CSS边框颜色边框颜色(border-color)属性值是绿色。属性值是绿色。这个这个div的的CSS边框颜色边框颜色(border-color)属性值是蓝色。属性值是蓝色。这个这个div的的CSS边框颜色边框颜色(border-color)属性值是番茄红。属性值是番茄红。这个这个div的的CSS边框颜色边框颜色(border-color)属性值是灰色。属性值是灰色。CSS边框属性PPT课件 边框属性(border) 这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下

9、： .d1 border:5px solid gray;看案例：CSS边框属性PPT课件边框属性 border.d1 border:5px solid gray;这个div的边框属性：边框宽度(border-width)为5px；边框风格(border-style)为直线式；边框颜色为灰色。CSS边框属性PPT课件单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。设定下边框属性，你可以使用border-bottom, borde

10、r-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。看案例：CSS边框属性PPT课件单个边框属性单个边框属性 .d1 border-top:5px solid #FF0000.d2 border-bottom:5px solid #FF0000.d3 border-left:5px solid #