CSS border

10.3. CSS border-style 属性 -- 定义边框样式

10.3.1. CSS border-top-style 属性

10.3.2. CSS border-right-style 属性

10.3.3. CSS border-bottom-style 属性

10.3.4. CSS border-left-style 属性

CSS border-style 属性示例 -- 可以尝试编辑

• CSS border-style 属性示例
• CSS border-style 属性示例

border-style -- 定义边框的样式

• 取值:{1,4} | inherit
  • {1,4}: 边框样式
  • inherit: 继承
• 引用网址:http://www.dreamdu.com/css/property_border-style/
• 初始值: none
• 继承性: 否
• 适用于: 所有元素
• border:边框,style:样式

border-style和border-width的赋值方式是一样的,可以分别赋1,2,3或4个边的样式.

border-style的取值

• none: 无样式
• hidden: 除了同表格的边框发生冲突的时候,其它同none
• dotted: 点划线
• dashed: 虚线
• solid: 实线
• double: 双线,两条线加上中间的空白等于border-width的取值
• groove: 槽状
• ridge: 脊状,和groove相反
• inset: 凹陷
• outset:凸出,和inset相反

猴子提示: 由于border-style的初始值为none,所以除非设置了边框样式,否则边框将无法看见.

示例

p#fourborders{ border-style:dotted dashed solid double;}

如果定义四个值,那么这四个值就分别是上,右,下,左边框(从上边框开始,以顺时针的顺序遍历).定义梦之都段落的上边框为点划线,右边框为虚线,下边框为实线,左边框为双线.

p#threeborders{ border-style:groove ridge outset;}

如果只定义三个值,中间的值代表左和右边框.定义梦之都段落的上边框为槽状,下边框为凸出,左,右边框为脊状.

p#twoborders{ border-style:none dashed;}

如果只定义两个值,前面的值代表上下边框,后面的值代表左右边框.定义梦之都段落的上,下边框为无样式,左,右边框为虚线.

p#oneborders{ border-style:dotted;}

如果只定义一个值,这个值就代表四个边的.定义梦之都段落的边框为点划线.

参考

• CSS2.1 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-style' property
• CSS3 The 'border-style' properties

From 'CSS border-style 属性 - 定义边框样式 - CSS边框 - CSS教程'

?