`
piperzero
  • 浏览: 3555015 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

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;
  }

TIY

浏览器支持

所有浏览器都支持 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 规定应该从父元素继承边框样式。
分享到:
评论

相关推荐

    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