CSS 属性
全部展开 | 全部折叠
CSS 规则

CSS border-left-style 属性

主题:CSS3 属性参考上一页|下一页

说明

border-left-style CSS 属性单独设置元素左边框的样式。 然而,在许多情况下,像 border-styleborder-left 这样的简写 CSS 属性更易于使用且更受欢迎。

下表总结了此属性的使用上下文和版本历史记录。

默认值: none
适用于: 所有元素
继承: No
动画: No. 参见动画属性
版本: CSS 1, 2, 3

语法

属性的语法如下:

border-left-style: 
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

下面的例子展示了 border-left-style 属性的作用。

p {
    border-left-style: dashed;
    border-left-width: 3px;
}

属性值

下表描述了该属性的值。

说明
none 不会显示边框。
hidden none 相同,但表格单元格具有 collapsed borders 且两个单元格共享边框的情况除外。 hidden 值确保不绘制边框,因为 hidden 优先于所有其他边框样式。
dotted 将边框显示为一系列点。
dashed 将边框显示为一系列短线段,即短划线。
solid 将边框显示为单条实线。
double 将边框显示为两条平行的实线,它们之间有一些空间。 两行和它们之间的间距之和等于 border-width 的值。
groove 显示在画布上雕刻的边框。 它给人的 3D 印象通常是通过从比 border-color 稍亮和稍暗的两种颜色创建阴影来实现的。
ridge 显示与 groove 效果相反的边框。 它还给人一种 3D 的印象, 边框看起来好像是从画布上出来的。
inset 显示使元素的框看起来好像嵌入在画布中的边框。 它给人的 3D 印象通常是通过从比 border-color 稍亮和稍暗的两种颜色创建阴影来实现的。
outset 显示与 inset 效果相反的边框。 它还给人一种 3D 的印象,边框使盒子看起来像是从画布中出来的。
inherit 如果指定,则关联元素采用其父元素 border-left-style 属性的 计算值

浏览器兼容性

所有主流现代浏览器都支持 border-left-style 属性。

Browsers Icon

基本支持—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

进一步阅读

请参阅以下教程: CSS 边框, CSS3 边框.

相关属性: border, border-style, border-left, border-left-color,
border-left-width.

Advertisements