border-width介绍
border-width属性设置一个元素的四个边框的宽度。在CSS初学者阶段,我们都是建议采用像素做单位。
border-width属性可以有一到四个值。
- 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
- 如果只提供一个,将用于全部的四边。
- 如果提供两个,第一个用于上、下,第二个用于左、右。
- 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
- 如果border-style设置为none或hidden,border-width的使用值将为0。
CSS border-width属性值
css border-width属性取值如下表:
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
在WEB网站开发中,一般建议使用px像素作为border-width的单位,例如:border-width:1px;表示四个边框的宽度为1个像素。
<##ads_in_article_manong##>
border-width 实例
设置p元素四个边框的宽度:
<!DOCTYPE html>
<html>
<head>
< >http://www.manongjc.com/article/1198.html</ >
<style>
p.one{
border-style:solid;
border-width:5px;
}
p.two{
border-style:solid;
border-width:medium;
}
p.three{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class=\"one\">Some text.</p>
<p class=\"two\">Some text.</p>
<p class=\"three\">Some text.</p>
<p><b>Note:</b> The \"border-width\" property does not work if it is used alone. Use the \"border-style\" property to set the borders first.</p>
</body>
</html>
继续阅读与本文标签相同的文章
-
健乐教学机器人可开展的教学实训内容
2026-05-14栏目: 教程
-
5G套餐曝光遭“吐槽”,iphone11受追捧,导致苹果11销量比较高
2026-05-14栏目: 教程
-
为什么修电脑的叫自己不要杀毒和清理垃圾?
2026-05-14栏目: 教程
-
当水乡建筑遇上机器人,成就乌镇又一网红景点
2026-05-14栏目: 教程
-
惊险!手刹失灵,郴州一货车开启“无人驾驶”模式……
2026-05-14栏目: 教程
