CSS边框设计优秀讲义.pptVIP

使用CSS格式化网页 设置元素边框 border-style边框样式属性 border-width边框宽度属性 border-color边框色彩属性 border属性的综合设置 border-style边框样式属性 在CSS里了，利用边框样式属性不仅可以设置单位边框样式属性，还可以对单位边框进行设置，而且也可以利用复合边框样式属性来统一设置四条边框的样式。 基本语法： border-style:样式值 border-top-style:样式值 border-bottom-style:样式值 border-left-style:样式值 border-right-style:样式值 border-style边框样式属性 语法说明： border-style是一个复合属性，复合属性的值有四种设置方法，其他4个都是单个边框的样式属性，只能取一个值。样式值属性的具体说明见表10-8。 设置一个值：四条边框宽度均使用一个值。 设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。 设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。 设置四个值：四条边框宽度的调用顺序为上、右、下、左。 Boder-style 属性值 style type=text/css p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} /style /head body p class=dottedA dotted border/p p class=dashedA dashed border/p p class=solidA solid border/p p class=doubleA double border/p p class=grooveA groove border/p p class=ridgeA ridge border/p p class=insetAn inset border/p p class=outsetAn outset border/p /body style type=text/css p.soliddouble {border-style: solid double} p.doublesolid {border-style: double solid} p.groovedouble {border-style: groove double} p.three {border-style: solid double groove} /style /head body p class=soliddoubleSome text/p p class=doublesolidSome text/p p class=groovedoubleSome text/p p class=threeSome text/p /body border-width边框宽度属性 border-width属性，是控制元素边框的宽度的一个综合属性，和border-style一样也有四种单独的设置方法，分别来定义四条边框的宽度，设置方法和边框样式一样。 基本语法： border-width边框宽度属性 语法说明： thin、medium、thick分别表示细、中等、粗，length表示长度单位 style type=text/css p.one { border-style: solid; border-width: 5px } p.two { border-style: solid; border-width: thick } p.three { border-style: solid; border-width: 5px 10px } p.four { border-style: solid; border-width: 5px 10px 1px } p.five { border-style: solid; border-width: 5px 10px 1px medium } /style /head body p class=oneSome text/p p class=twoSome text/p p class=threeSome text