Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.2.2知识点1：边框属性介绍

边框属性信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备边框属性介绍1边框样式设置2边框粗细设置3边框颜色设置401边框属性介绍前端技术开发01边框属性介绍边框颜色边框粗细边框样式border-colorborder-styleborder-width前端技术开发02边框样式设置边框样式设置前端技术开发02

边框样式属性下边框上边框右边框左边框网页元素有上(top)、右(right)、下(bottom)、左(left)四条边框。

名称属性上边框样式属性border-top-style:样式取值下边框样式属性border-bottom-style:样式取值左边框样式属性border-left-style:样式取值右边框样式属性border-right-style:样式取值边框样式设置前端技术开发02值描述none定义无边框hidden与none相同。不过应用于表时除外，对于表，hidden用于解决边框冲突dotted定义点状边框。在大多数浏览器中呈现为实线dashed定义虚线。在大多数浏览器中呈现为实线solid定义实线double定义双线。双线的宽度等于border-width的值groove定义3D凹槽边框。其效果取决于border-color的值ridge定义3D垄状边框。其效果取决于border-color的值inset定义3Dinset边框。其效果取决于border-color的值outset定义3Doutset边框。其效果取决于border-color的值inherit规定应该从父元素继承边框样式边框样式属性的取值：边框样式设置前端技术开发02如何设置标题的左边框？设置元素的上边框border-top-style:dashed;border-right-style:double;设置元素的右边框border-bottom-style:solid;设置标题的下边框边框样式设置前端技术开发02

边框样式综合设置-border-style属性border-style属性是一个复合属性，可以同时取1~4个值。情况一：设置1个值，表示四条边同时设置。p{border-style:solid;}属性样式设置前端技术开发02情况二：设置2个值，其第1个值设置上下边框，第2个值设置左右边框border-style:soliddashed;属性样式设置前端技术开发02border-style:soliddasheddouble;情况三：设置3个值，第1个值为上边框，第2个值为左右边框，第3个值为下边框1223属性样式设置前端技术开发02border-style:soliddasheddoubledotted;情况四：设置4个值，分别按照顺时针方向上、右、下、左边框设置。1234前端技术开发03边框粗细设置边框粗细设置前端技术开发02设置边框粗细属性：

名称属性上边框粗细属性border-top-width:关键字（thin、medium、thick）|长度下边框粗细属性border-bottom-width:关键字|长度左边框粗细属性border-left-width:关键字|长度右边框粗细属性border-right-width:关键字|长度综合属性border-width:关键字|长度边框粗细设置前端技术开发02边框粗细属性的实例：网页源代码网页效果04边框颜色设置04边框颜色设置

名称属性上边框颜色属性border-top-color:颜色关键字|RGB值下边框颜色属性border-bottom-color:颜色关键字|RGB值左边框颜色属性border-left-color:颜色关键字|RGB值右边框颜色属性border-right-color:颜色关键字|RGB值综合属性border-color:颜色关键字|RGB值设置边框颜色属性：04边框颜色设置网页效果网页源代码边框颜色属性的实例：04边框综合设置边框组合属性-borderborder属性可同时设置元素的四条边框的样式、粗细、颜色。网页源代码网页效果总结所有网页元素都有上(top)、右(right)、下(bottom)、左(left)四条边框。每一条边框都可以对样式(style)、宽度(width)和颜色(color)进行样式控制。bordersytlewidthcolortopborder-top-styleborder-top-widthborder-top-colorbottomborder-bottom-styleborder-bottom-widthborder-bottom-colorleftborder-left-styleborder-left-widthborder-left-colorrightborder-right-styleborder-right-widthborder-right-colo