小白教程
所有教程
关于
Search
172.70.135.13
172.70.135.13
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS Border(边框)”的源代码
本页内容
上一节:
CSS_盒子模型
下一节:
CSS_轮廓(outline)属性
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS Border(边框)}}[[Category:CSS 教程|13]] = CSS 边框 = == CSS 边框属性 == CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框 红色底部边框 圆角边框 左侧边框带宽度,颜色为蓝色 == 边框样式 == 边框样式属性指定要显示什么样的边界。 '''border-style'''属性用来定义边框的样式 == border-style 值: == none: 默认无边框 dotted: 定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值 <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p.none {border-style:none;} 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;} p.hidden {border-style:hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> <p class="none">无边框。</p> <p class="dotted">虚线边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双边框。</p> <p class="groove"> 凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">嵌入边框。</p> <p class="outset">外凸边框。</p> <p class="hidden">隐藏边框。</p> <p class="mix">混合边框</p> </body> </html> </run> == 边框宽度 == 您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。 '''注意:'''CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。 <sample title="" desc="" lang="html" hererun="1"> p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; } </style> </head> <body> <p class="one">一些文本。</p> <p class="two">一些文本。</p> <p class="three">一些文本。</p> <p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p> </body> </html> </run> == 边框颜色 == border-color属性用于设置边框的颜色。可以设置的颜色: * name - 指定颜色的名称,如 "red" * RGB - 指定 RGB 值, 如 "rgb(255,0,0)" * Hex - 指定16进制值, 如 "#ff0000" 您还可以设置边框的颜色为"transparent"。 '''注意:''' border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。 <sample title="" desc="" lang="html" hererun="1"> p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } </style> </head> <body> <p class="one">实线红色边框</p> <p class="two">实线绿色边框</p> <p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</p> </body> </html> </run> == 边框-单独设置各边 == 在CSS中,可以指定不同的侧面不同的边框: <sample title="" desc="" lang="html" hererun="1"> p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } </style> </head> <body> <p>两个不同的边界样式。</p> </body> </html> </run> 上面的例子也可以设置一个单一属性: <sample title="" desc="" lang="html" hererun="1"> border-style:dotted solid; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { border-style:dotted solid; } </style> </head> <body> <p>两个不同的边界样式。</p> </body> </html> </run> border-style属性可以有1-4个值: * '''border-style:dotted solid double dashed;''' ** 上边框是 dotted ** 右边框是 solid ** 底边框是 double ** 左边框是 dashed * '''border-style:dotted solid double;''' ** 上边框是 dotted ** 左、右边框是 solid ** 底边框是 double * '''border-style:dotted solid;''' ** 上、底边框是 dotted ** 右、左边框是 solid * '''border-style:dotted;''' ** 四面边框是 dotted 上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。 == 边框-简写属性 == 上面的例子用了很多属性来设置边框。 你也可以在一个属性中设置边框。 你可以在"border"属性中设置: * border-width * border-style (required) * border-color <sample title="" desc="" lang="html" hererun="1"> border:5px solid red; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { border:5px solid red; } </style> </head> <body> <p>段落中的一些文本。</p> </body> </html> </run> == 更多实例 == [[try.php?filename=trycss_border top|所有边框属性在一个声明之中]] 本例演示用简写属性来将所有四个边框属性设置于同一声明中。 [[try.php?filename=trycss_border bottom style|设置下边框的样式]] 本例演示如何设置下边框的样式。 [[try.php?filename=trycss_border left width|设置左边框的宽度]] 本例演示如何设置左边框的宽度。 [[try.php?filename=trycss_border color|设置四个边框的颜色]] 本例演示如何设置四个边框的颜色。可以设置一到四个颜色。 [[try.php?filename=trycss_border right color|设置右边框的颜色]] 本例演示如何设置右边框的颜色。 == CSS 边框属性 == {| class="table table-striped table-hover" ! 属性 ! 描述 |- | [[pr border|border]] | 简写属性,用于把针对四个边的属性设置在一个声明。 |- | [[pr border style|border-style]] | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |- | [[pr border width|border-width]] | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |- | [[pr border color|border-color]] | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |- | [[pr border bottom|border-bottom]] | 简写属性,用于把下边框的所有属性设置到一个声明中。 |- | [[pr border bottom color|border-bottom-color]] | 设置元素的下边框的颜色。 |- | [[pr border bottom style|border-bottom-style]] | 设置元素的下边框的样式。 |- | [[pr border bottom width|border-bottom-width]] | 设置元素的下边框的宽度。 |- | [[pr border left|border-left]] | 简写属性,用于把左边框的所有属性设置到一个声明中。 |- | [[pr border left color|border-left-color]] | 设置元素的左边框的颜色。 |- | [[pr border left style|border-left-style]] | 设置元素的左边框的样式。 |- | [[pr border left width|border-left-width]] | 设置元素的左边框的宽度。 |- | [[pr border right|border-right]] | 简写属性,用于把右边框的所有属性设置到一个声明中。 |- | [[pr border right color|border-right-color]] | 设置元素的右边框的颜色。 |- | [[pr border right style|border-right-style]] | 设置元素的右边框的样式。 |- | [[pr border right width|border-right-width]] | 设置元素的右边框的宽度。 |- | [[pr border top|border-top]] | 简写属性,用于把上边框的所有属性设置到一个声明中。 |- | [[pr border top color|border-top-color]] | 设置元素的上边框的颜色。 |- | [[pr border top style|border-top-style]] | 设置元素的上边框的样式。 |- | [[pr border top width|border-top-width]] | 设置元素的上边框的宽度。 |- | [[css3 pr border radius|border-radius]] | 设置圆角的边框。 |}
返回至“
CSS Border(边框)
”。
上一节:
CSS_盒子模型
下一节:
CSS_轮廓(outline)属性