5.3边框属性 (1)讲解.pptx

边框属性5.3

边框属性是盒子模型的属性之一，用于给元素设置边框效果。在CSS中，边框属性包括下列属性。5.3边框属性设置内容样式属性常用属性值边框样式border-stylenone：无（默认）solid：单实线dashed：虚线dotted：点线double：双实线边框宽度border-width像素值

设置内容样式属性常用属性值边框颜色border-color颜色值英文单词十六进制颜色值rgb(r,g,b)rgb(r%,g%,b%)综合设置边框border复合属性取值圆角边框border-radius像素值或百分比数值图片边框border-images复合属性取值5.3边框属性

掌握border-style属性的用法，能够为盒子设置边框样式。学习目标5.3边框属性5.3.1boder-style：边框样式

5.3边框属性5.3.1boder-style：边框样式在CSS属性中，border-style属性用于设置边框样式。border-style属性的基本语法格式border-style:上边[右边下边左边];表示四条边的样式的属性值必须按上、右、下、左的顺时针顺序，书写边框样式的属性值各属性值之间用空格分开

5.3边框属性5.3.1boder-style：边框样式设置边框样式时也可以统一设置4条边的样式。在统一设置4条边的样式时，可以按照值复制原则，所谓值复制原则，是指在设置属性值时，可以按既定规则，省略部分相同的属性值。在设置边框样式时，值复制原则设置一个属性值，代表4条边样式。设置两个属性值，第1个属性值代表上边和下边，第2个属性值代表左边和右边。设置三个属性值，第1个属性值代表上边，第2个属性值代表左边和右边，第3个值代表下边。

5.3边框属性5.3.1boder-style：边框样式border-style属性的常用属性值solid：边框样式为单实线dashed：边框样式为虚线dotted：边框样式为点线double：边框样式为双实线p{borer-style:dashedsolidsolidsolid;}p{borer-style:dashedsolidsolid;}

5.3边框属性5.3.1boder-style：边框样式案例演示

掌握border-width属性的用法，能够为设置边框的宽度。学习目标5.3边框属性5.3.2border-width：边框宽度

5.3边框属性border-width属性用于设置边框的宽度。border-width属性的基本语法格式border-width:上边[右边下边左边];5.3.2border-width：边框宽度遵循值复制的原则常用取值单位为像素（px）

5.3边框属性5.3.2border-width：边框宽度案例演示

掌握border-color属性的用法，能够为设置边框的颜色。学习目标5.3边框属性5.3.3border-color：边框颜色

5.3边框属性border-color属性用于设置边框的颜色。border-color属性的基本语法格式border-color:上边[右边下边左边];5.3.3border-color：边框颜色属性值可为颜色的英文单词遵循值复制的原则属性值可为十六进制颜色值属性值可为RGB颜色值

掌握border属性的用法，能够综合设置边框。学习目标5.3边框属性5.3.4border：综合设置边框

5.3边框属性5.3.4border：综合设置边框CSS为什么要提供border属性？

5.3边框属性5.3.4border：综合设置边框原因:使用border-style、border-width、border-color虽然可以实现丰富的边框效果，但是这种设置边框样式的方式，书写的代码繁琐，且不便于阅读，为此CSS提供了综合设置边框样式属性——border。

5.3边框属性border属性的基本语法格式border:宽度样式颜色;边框宽度、样式、颜色的顺序不分先后省略的属性将取默认值，但边框样式不能省略5.3.4border：综合设置边框可以只指定需要设置的边框属性

5.3边框属性5.3.4border：综合设置边框当每一条边框样式都不相同，或者只需单独定义某一侧的边框时，可以使用单侧边框的综合属性border-top、border-bottom、border-left或border-right进行设置。例如：单独定义段落的上边框p{border-top:2pxsolid#CCC;}/*定义上边框，各个值顺序任意*/

5.3边框属性5.3.4border：综合设置边框当四条边的边框样式都相同时，可以使用border属性进行