CSS border-style 属性 · W3School CSS 参考手册

# CSS border-style 属性 ## 实例设置 4 个边框的样式： ``` p { border-style:solid; } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有浏览器都支持 border-style 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit" 或 "hidden"。 ## 定义和用法 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。 #### 例子 1 ``` border-style:dotted solid double dashed; ``` * 上边框是点状 * 右边框是实线 * 下边框是双线 * 左边框是虚线 #### 例子 2 ``` border-style:dotted solid double; ``` * 上边框是点状 * 右边框和左边框是实线 * 下边框是双线 #### 例子 3 ``` border-style:dotted solid; ``` * 上边框和下边框是点状 * 右边框和左边框是实线 #### 例子 4 ``` border-style:dotted; ``` * 所有 4 个边框都是点状 | 默认值： | _not specified_ | | --- | --- | | 继承性： | no | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 语法： | _object_.style.borderStyle="dotted double" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | none | 定义无边框。 | | hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 | | dotted | 定义点状边框。在大多数浏览器中呈现为实线。 | | dashed | 定义虚线。在大多数浏览器中呈现为实线。 | | solid | 定义实线。 | | double | 定义双线。双线的宽度等于 border-width 的值。 | | groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 | | ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 | | inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 | | outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 | | inherit | 规定应该从父元素继承边框样式。 | ### 描述最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。 ## TIY 实例 [设置四边框样式](/tiy/t.asp?f=csse_border-style) 本例演示如何设置四边框样式。 ``` <html> <head> <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> A dotted border A dashed border A solid border A double border A groove border A ridge border An inset border An outset border </body> </html> ``` [设置每一边的不同边框](/tiy/t.asp?f=csse_border-style2) 本例演示如何在元素的各边设置不同的边框。 ``` <html> <head> <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> Some text Some text Some text Some text </body> </html> ``` ## 相关页面 CSS 教程：[CSS 边框](/css/css_border.asp "CSS 边框") HTML DOM 参考手册：[borderStyle 属性](/jsref/prop_style_borderstyle.asp "HTML DOM borderStyle 属性")