初学html第三篇章之css边框_html的边框css-CSDN博客

本文链接：https://blog.csdn.net/weixin_44703686/article/details/117562086

本文介绍了CSS边框的基本属性，包括边框样式、宽度、颜色，并详细讲解了如何设置不同边框的效果。同时，文章还提及了外边距和内边距的用法，以及在实际项目中应用CSS边框的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS边框的基本属性介绍：

1、CSS边框属性

border 属性允许您指定元素边框的样式、宽度和颜色。

2、CSS边框样式：

border-style 属性指定要显示的边框类型。有以下值做参考：

3、 CSS边框宽度：

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

4、 CSS边框颜色：

border-color 属性用于设置四个边框的颜色。

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

可以通过以下方式设置颜色：

注意：如果未设置 border-color，则它将继承元素的颜色。

5、 CSS边框：

border-style属性可以有1-4个值：

例如：

border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted

6、CSS外边框：

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-left

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

注：（1）允许负值。

（2）将 margin 属性设置为 auto，以使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

7、CSS内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

注：不允许负值。

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

二、项目举例：

1、代码撰写：

通过一个花样边框来显示CSS 边框的相关介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花样边框</title>
</head>
<style>

.one{
  background-color: white;
  width: 400px;
  height: 400px;
  border: 2px dotted gray;
  margin: auto;
  display: flex;
  align-items: center;

}
.two{
  background-color: lightgrey;
  width: 300px;
  height: 300px;
  border: 5px solid gray;
  margin: 46px 45px ;
  }

.three{
  background-color:rebeccapurple;
  width: 250px;
  height: 250px;
  border: 2px solid gray;
  margin-top: 25px;
  margin-left: 22px;
  }

.four{
   background-color:rgb(172, 36, 21);
  width: 210px;
  height: 210px;
  border: 2px solid gray;
  margin-top: 20px;
  margin-left: 20px;
}

.five{
  background-color:rgb(172, 36, 21);
  width: 190px;
  height: 190px;
  border: 2px solid gray;
  margin-top: 8px;
  margin-left: 8px;
}

.six{
  background-color:white;
  width: 80px;
  height: 80px;
  border: 5px solid black;
  margin-top: 50px;
  margin-left: 50px;

}

</style>
<body>
    
    <div  class="one">
        <div class="two">
            <div class="three">
                <div class="four">
                    <div class="five">
                        <div class="six">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
</body>
</html>

2、结果显示：