`

CSS border-style 属性

    博客分类:
  • CSS
 
阅读更多

定义和用法

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 个边框都是点状
默认值: 继承性: 版本: JavaScript 语法:
not specified
no
CSS1
object.style.borderStyle="dotted double"

实例

设置 4 个边框的样式:

p
  {
  border-style:solid;
  }

 

 

浏览器支持

所有浏览器都支持 border-style 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

值 描述
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 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定,创作人员对这个决定没有任何影响。

分享到:
评论

相关推荐

    CSS border-style 属性使用方法

    border-style — 定义边框的样式 取值:<border>{1,4} | inherit <border>{1,4}: 边框样式 inherit: 继承 初始值: none 继承性: 否 适用于: 所有元素 border:边框,style:样式 border-style和border-width的赋值方式是...

    CSS border.docx CSS border.docx

    CSS border-style 属性详解 CSS 中的 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。border-style 属性的值可以是 none、hidden、dotted...

    table中的border-collapse属性

    在探讨“table中的border-collapse属性”这一主题时,我们深入剖析了CSS中这一关键属性的运作机制及其对表格布局的影响。border-collapse属性是CSS中用于控制表格边框表现的重要属性,它决定了表格单元格(td)之间...

    css-border-effects.zip

    3. **边框风格**:`border-style`属性允许设置不同的边框样式,如`solid`(实线)、`dashed`(虚线)、`dotted`(点状线)、`double`(双线)等。 4. **边框简写属性**:为了简化代码,可以使用`border`属性一次性...

    解决border-radius失效问题

    在CSS世界中,`border-radius`属性是一个非常重要的特性,它允许我们为元素添加圆角效果,从而使得设计更加精致和现代。然而,在实际开发中,我们可能会遇到`border-radius`失效的问题,导致元素的边角无法按照预期...

    css border 虚线的使用方法.docx

    要使用 CSS border 虚线,需要使用 border-style 属性设置虚线样式。border-style 属性可以取以下几种值: * dotted:虚线边框,每个虚线都是一个圆点。 * dashed:虚线边框,每个虚线都是一个短线。 * double:...

    CSS 盒子模型.pdf

    border-style 属性用于设置边框的样式,可以单独设置每个边框的样式,也可以设置四个边框的统一样式。 * border-top-style: 上边框样式 * border-right-style: 右边框样式 * border-bottom-style: 下边框样式 * ...

    JavaScript CSS Style属性对照表

    ### JavaScript CSS Style属性对照表详解 #### 一、引言 在前端开发中,通过JavaScript动态修改CSS属性是一种常见的操作手法。例如,在用户交互时改变元素的样式来增强用户体验。本文将详细介绍如何利用JavaScript...

    如何使用CSS(14)-边框属性

    CSS中的边框属性主要包括以下几类:`border`, `border-width`, `border-style`, `border-color`以及针对四个不同方向的边框属性(例如:`border-top-width`, `border-bottom-style`等)。这些属性可以单独设置,也...

    XML应用开发(软件品牌)-1期 4.8 案例分析-使用CSS容器属性显示XML文档-边框属性border.doc

    本案例重点讨论了如何利用CSS的容器属性——边框属性`border`来显示XML文档,这有助于提升XML数据的可读性和视觉吸引力。以下是对这个知识点的详细解释: ### 边框属性 `border` 1. **边框样式 `border-style`** ...

    引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果

    在IT行业中,CSS3是 Cascading Style Sheets 的第三版本,带来了许多令人兴奋的新特性,其中包括 `border-radius`,它使得我们可以轻松地为HTML元素添加圆角效果,无需使用图像或复杂的CSS技巧。然而,这个特性在...

    border虚线样式(style)

    总之,CSS中的`border-style`属性是创建虚线边框的关键。通过组合使用`border-style`, `border-width`, 和 `border-color`,你可以根据需要定制边框的样式。同时,通过一些创意技巧,比如多边框叠加和伪元素,还可以...

    2.2.37 CSS列表属性(二)列表项目图像:list-style-image.docx

    "CSS 列表属性:list-style-image 和 list-style-position" CSS 列表属性是 CSS 中的一种样式属性,用于控制列表的样式和布局。本文主要介绍了 list-style-image 和 list-style-position 两个属性的用法和应用。 ...

    CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo

    尽管现代浏览器广泛支持CSS3的`border-radius`属性,但为了确保在较旧浏览器中的兼容性,可以使用渐进增强的方法,为不支持此属性的浏览器提供备选样式。 7. 示例代码: “practical-css3-tables-with-rounded-...

    CSS border-width 属性使用教程

    **CSS `border-width`属性详解** `border-width`属性在CSS中用于定义元素边框的宽度,它允许你精确...结合其他边框属性(如`border-style`和`border-color`),你可以创建出各种各样的边框效果,满足不同的设计需求。

    CSS 设置边框属性.docx

    1. **border-style属性** `border-style`属性用于定义边框的样式,提供了多种选择来改变边框的视觉表现。如描述中提到的,CSS提供了9种不同的边框样式: - `none`:无边框 - `hidden`:与`none`相似,但可以用于...

    【前端】盒子模型的边框样式属性和应用技巧讲解.pdf

    为了简化代码并提高可读性,CSS还提供了综合设置边框的属性,如`border`,它结合了`border-style`、`border-width`和`border-color`。例如,设置一个段落的边框样式为实线,上下边灰色,左右边红色: ```css p { ...

Global site tag (gtag.js) - Google Analytics