CSS 边框宽度

最新推荐文章于 2024-08-12 09:00:00 发布

原创最新推荐文章于 2024-08-12 09:00:00 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

90 篇文章

订阅专栏

这篇博客介绍了如何使用CSS的border-width属性来设置元素的边框宽度。通过实例展示了如何分别指定上、右、下、左边框的宽度，如p.one的边框为上、下5像素，左、右20像素，p.two则反之，p.three的边框宽度分别为上25像素、右25像素、下4像素、左35像素。这些示例有助于理解CSS中边框宽度的用法。

CSS 边框宽度

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上、下边框 5 像素，左、右边框 20 像素 */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上、下边框 20 像素，左、右边框 5 像素 */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上 25 像素、右 25 像素、下 4 像素、左 35 像素 */
}
</style>
</head>
<body>

<h1>border-width 属性</h1>

<p>border-width 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>

<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>

</body>
</html>