定义和用法
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;
默认值:
not specified |
继承性:
no |
版本:
CSS1 |
JavaScript 语法:
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 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定,创作人员对这个决定没有任何影响。
分享到:
相关推荐
border-style — 定义边框的样式 取值:<border>{1,4} | inherit <border>{1,4}: 边框样式 inherit: 继承 初始值: none 继承性: 否 适用于: 所有元素 border:边框,style:样式 border-style和border-width的赋值方式是...
CSS border-style 属性详解 CSS 中的 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。border-style 属性的值可以是 none、hidden、dotted...
在探讨“table中的border-collapse属性”这一主题时,我们深入剖析了CSS中这一关键属性的运作机制及其对表格布局的影响。border-collapse属性是CSS中用于控制表格边框表现的重要属性,它决定了表格单元格(td)之间...
3. **边框风格**:`border-style`属性允许设置不同的边框样式,如`solid`(实线)、`dashed`(虚线)、`dotted`(点状线)、`double`(双线)等。 4. **边框简写属性**:为了简化代码,可以使用`border`属性一次性...
在CSS世界中,`border-radius`属性是一个非常重要的特性,它允许我们为元素添加圆角效果,从而使得设计更加精致和现代。然而,在实际开发中,我们可能会遇到`border-radius`失效的问题,导致元素的边角无法按照预期...
要使用 CSS border 虚线,需要使用 border-style 属性设置虚线样式。border-style 属性可以取以下几种值: * dotted:虚线边框,每个虚线都是一个圆点。 * dashed:虚线边框,每个虚线都是一个短线。 * double:...
border-style 属性用于设置边框的样式,可以单独设置每个边框的样式,也可以设置四个边框的统一样式。 * border-top-style: 上边框样式 * border-right-style: 右边框样式 * border-bottom-style: 下边框样式 * ...
### JavaScript CSS Style属性对照表详解 #### 一、引言 在前端开发中,通过JavaScript动态修改CSS属性是一种常见的操作手法。例如,在用户交互时改变元素的样式来增强用户体验。本文将详细介绍如何利用JavaScript...
CSS中的边框属性主要包括以下几类:`border`, `border-width`, `border-style`, `border-color`以及针对四个不同方向的边框属性(例如:`border-top-width`, `border-bottom-style`等)。这些属性可以单独设置,也...
本案例重点讨论了如何利用CSS的容器属性——边框属性`border`来显示XML文档,这有助于提升XML数据的可读性和视觉吸引力。以下是对这个知识点的详细解释: ### 边框属性 `border` 1. **边框样式 `border-style`** ...
在IT行业中,CSS3是 Cascading Style Sheets 的第三版本,带来了许多令人兴奋的新特性,其中包括 `border-radius`,它使得我们可以轻松地为HTML元素添加圆角效果,无需使用图像或复杂的CSS技巧。然而,这个特性在...
总之,CSS中的`border-style`属性是创建虚线边框的关键。通过组合使用`border-style`, `border-width`, 和 `border-color`,你可以根据需要定制边框的样式。同时,通过一些创意技巧,比如多边框叠加和伪元素,还可以...
"CSS 列表属性:list-style-image 和 list-style-position" CSS 列表属性是 CSS 中的一种样式属性,用于控制列表的样式和布局。本文主要介绍了 list-style-image 和 list-style-position 两个属性的用法和应用。 ...
尽管现代浏览器广泛支持CSS3的`border-radius`属性,但为了确保在较旧浏览器中的兼容性,可以使用渐进增强的方法,为不支持此属性的浏览器提供备选样式。 7. 示例代码: “practical-css3-tables-with-rounded-...
**CSS `border-width`属性详解** `border-width`属性在CSS中用于定义元素边框的宽度,它允许你精确...结合其他边框属性(如`border-style`和`border-color`),你可以创建出各种各样的边框效果,满足不同的设计需求。
1. **border-style属性** `border-style`属性用于定义边框的样式,提供了多种选择来改变边框的视觉表现。如描述中提到的,CSS提供了9种不同的边框样式: - `none`:无边框 - `hidden`:与`none`相似,但可以用于...
为了简化代码并提高可读性,CSS还提供了综合设置边框的属性,如`border`,它结合了`border-style`、`border-width`和`border-color`。例如,设置一个段落的边框样式为实线,上下边灰色,左右边红色: ```css p { ...