码农教程 - 一技在手,衣食无忧! tools

目录

CSS border-width 属性

❮上一节 完整的CSS参考 下一节❯

示例

设置边框的宽度：

div {border-width: thin;}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个border-width属性设置元素的四个边框的宽度。该属性可以有一到四个值。

例子：

  • 边框宽度：薄 中 厚 10px；
    • 顶部边框很薄
    • 右边框为中
    • 底部边框很厚
    • 左边框为 10px

  • 边框宽度： 薄 中 厚；
    • 顶部边框很薄
    • 左右边框为中等
    • 底部边框很厚

  • 边框宽度：薄中等；
    • 顶部和底部边框很薄
    • 左右边框为中等

  • 边框宽度：薄；
    • 四个边框都很薄

笔记：始终声明边框式之前的属性border-width属性。在设置宽度之前，元素必须有边框。

展示演示❯

默认值： 中等的
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS1
JavaScript 语法： 对象.style.borderWidth="1px 5px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
border-width 1.0 4.0 1.0 1.0 3.5

CSS 语法

border-width: medium|thin|thick| length|initial|inherit;

属性值

Value Description Demo
medium Specifies a medium border. This is default Demo ❯
thin Specifies a thin border Demo ❯
thick Specifies a thick border Demo ❯
length Allows you to define the thickness of the border. Read about length units Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

将边框宽度设置为中等：

div {border-width: medium;}
亲自试一试 »

示例

将边框宽度设置为粗：

div {border-width: thick;}
亲自试一试 »

示例

将边框宽度设置为 1px：

div {border-width: 1px;}
亲自试一试 »

示例

将边框宽度设置为 15px：

div {border-width: 15px;}
亲自试一试 »

示例

设置上下边框的宽度为10px，左右边框的宽度为1px：

div {border-width: 10px 1px;}
亲自试一试 »

相关页面

CSS教程：CSS 边框

HTML DOM 参考：边框宽度属性


❮上一节 完整的CSS参考 下一节❯