CSS - 边框

上一页
下一页

在设计和样式的上下文中，边框是指围绕对象内容（例如文本框、图像或网页上的任何其他 HTML 元素）的装饰性或功能性元素。

**border** 属性用于在元素（例如 div、图像或文本）周围创建边框。它允许您自定义边框的外观，包括其颜色、宽度和样式。

边框在网页的整体美感和设计中起着至关重要的作用。

目录


 

边框的重要性

在 CSS 中使用边框的重要性可以总结如下：

  • **视觉分离**: 边框有助于网页上不同元素的视觉分离，使用户更容易理解布局和导航。
  • **组织和结构**: 可以为网格、表格甚至盒子添加边框，使内容看起来更整洁有序。
  • **强调和焦点**: 可以为元素添加边框以强调和突出显示它们。
  • **设计和美观**: 边框允许您向元素添加装饰以增强视觉吸引力。这可以通过边框的样式、颜色和宽度来实现。

边框属性的类型

在 CSS 中，我们可以设置以下边框属性。

  • **border-style:** 指定边框应该是实线、虚线、双线还是其他可能的取值之一。
  • **border-width:** 指定边框的宽度。
  • **border-color:** 指定边框的颜色。

现在，我们将通过示例来了解如何使用这些属性。

边框样式属性

**border-style** 属性用于指定元素的边框类型。您可以将边框样式指定为实线、虚线或点线。查看以下示例的输出以了解所有类型的边框样式。

示例

我们使用内联 CSS 来指定边框样式。

<html>
<head>

</head>

<body>
    <h1>Border Style Property</h1>
    <p style="border-style: none;"> No border. </p>
    <p style="border-style: hidden;"> Hidden border. </p>
    <p style="border-style: dotted;"> Dotted border. </p>
    <p style="border-style: dashed;"> Dashed border. </p>
    <p style="border-style: solid;"> Solid border. </p>
    <p style="border-style: double;"> Double border. </p>
    <p style="border-style: groove;"> Groove border. </p>
    <p style="border-style: ridge;"> Ridge border. </p>
    <p style="border-style: inset;"> Inset border. </p>
    <p style="border-style: outset;"> Outset border. </p>
</body>

<html>

各个边的边框样式

**border-style** 属性可以专门为每一侧指定。可以为每一侧传递相同的边框样式值。

示例

<html>

<head>
    <style>
        p {
            border-top-style: dotted; 
            border-right-style: solid; 
            border-bottom-style: dashed; 
            border-left-style: double;
            padding: 2em;
        }
    </style>
</head>

<body>
    <h2>Border Style Individual Side</h2>
    <p>Different border styles on all sides.</p>
</body>

<html>

边框宽度属性

**border-width** 属性用于指定元素周围边框的厚度。它可以具有诸如 thin、medium、thick 或任何长度（以 px 或 em 为单位）的值。让我们来看一个关于此的示例。

示例

<html>
<head>
    <style>
        p.thin {
            border-style: solid; 
            border-width: thin;
            padding: 10px;
        }
        p.medium {
            border-style: solid; 
            border-width: medium;
            padding: 10px;
        }
        p.thick {
            border-style: solid; 
            border-width: thick;
            padding: 10px;
        }
        p.length {
            border-style: solid; 
            border-width: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <p class="thin">Thin width.</p>
    <p class="medium">Medium width.</p>
    <p class="thick">Thick width.</p>
    <p class="length">Border Width: 10px.</p>
</body>

</html>
在声明边框宽度属性之前，请先声明边框样式属性，否则将不会看到边框效果。

各个边的边框宽度

**border-width** 属性可以专门为每一侧指定。也可以为每一侧传递相同的值。

示例

<html>

<head>
    <style>
        p {
            border-style: solid;
            border-top-width: thin;
            border-right-width: thick;
            border-bottom-width: medium;
            border-left-width: 10px;
            padding: 2em;
        }
    </style>
</head>

<body>
    <h1>Border Width Individual Sides</h1>
    <p> Different border widths on all sides. </p>
</body>

</html>

边框颜色属性

**border-color** 属性用于设置边框的颜色。如果未为边框指定颜色，则默认值为 currentColor，即前景色。

示例

<html>

<head>
    <style>
        .name {
                border-style: dashed; 
                border-color: red;
                padding: 10px;
            }
        .hex {
                border-style: solid; 
                border-color: #00ff00;
                padding: 10px;
            }
    </style>
</head>

<body>
    <p class="name">Border Color: red</p>
    <p class="hex">Border Color: #00ff00.</p>
</body>

</html>
在声明边框颜色属性之前，请先声明边框样式属性，否则将不会看到边框效果。

各个边的边框颜色

**border-color** 属性可以专门为每一侧指定。可以为每一侧传递相同的 **border-color** 值。

示例

<html>
<head>
    <style>
        p {
            border: solid 7px;
            border-top-color: red;
            border-right-color: #0000ff;
            border-bottom-color: rgb(100,123,111);
            border-left-color: rgba(50,123,111,0.4);
            padding: 10px;
        }
    </style>
</head>

<body>
    <p>Check the border colors!!!</p>
</body>

</html>

边框简写属性

在 CSS 中，我们可以使用 **border** 属性来指定边框的样式、宽度和颜色。

语法

h2 {
    border: 4px dotted green;
}

以上代码将在 h2 元素的四面添加 4px 厚的绿色点线边框。

让我们来看一个示例

示例

<html>

<head>
    <style>
        p {
            border: solid 4px grey;
            padding: 10px;
        }
        div{
            /* You can specify in any order */
            border: darkred solid 5px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <p> Check the borders of paragraph !!!</p>
    <div> Check the borders of div !!!</div>
</body>
</html>

边框各个边的简写属性

如果您想应用所有边框属性（例如样式、宽度和颜色）到元素的一侧，您可以使用各个边的边框简写。

语法

h2 {
    border-top: 4px solid red;
}

以上代码将 4px 厚的红色实线边框应用于 h2 元素的顶部。

让我们来看一个示例

示例

<html>

<head>
    <style>
        p {
            border-top: red dashed thick;
            border-right: solid #0000ff medium;
            border-bottom: thin double rgb(100,123,111);
            border-left: rgba(50,123,111,0.4) 15px solid;
            padding: 5px;
        }
    </style>
</head>

<body>
    <p> Check out borders of paragraph !!!</p>
</body>

</html>

覆盖边框简写属性

您可以使用任何单独的属性来覆盖 **border** 简写属性。请查看以下示例代码以阐明这一点。

语法

div {
    border: 5px solid gray;
    border-bottom-width: 15px;
}

以上代码将具有 5px 厚的灰色实线边框，但底部宽度为 15px。

让我们来看一个示例

示例

<html>

<head>
    <style>
        div {
            padding: 10px;
            border: 5px solid gray;
            border-bottom-width: 15px;
        }
    </style>
</head>

<body>
    <div> Check the borders!!! </div>
</body>
</html>

内联元素的边框

可以以相同的方式为任何内联元素添加边框。边框的厚度不会影响元素的行高。如果在内联元素中指定了左右边框，它将使文本围绕边框显示。

让我们来看一个示例

示例

<html>

<head>
    <style>
        span {
            border: 5px solid black;
            background-color: silver;
        }
    </style>
</head>

<body>
    <p> 
        Check the <span>inline elements</span> with 
        borders and rest has no border.
    </p>
</body>

</html>

CSS 图片作为边框

CSS 还允许使用 **border-image** 属性将图像设置为其他元素（如 div、span、body、段落等）的边框。在提供图像源之前，请先声明 **border-style** ，否则将不会显示图像作为边框。

示例

<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url(/css/images/border.png) 40;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of setting a 
            border image using CSS
        </p>
    </div>
</body>
</html>

边框半径属性

CSS **border-radius** 属性用于指定边框边缘的圆度。此属性的值可以是长度（px、em）或百分比。边框半径 50% 表示一个完整的圆。

示例

<html>

<head>
    <style>
         div{
            background-color: #00f9f9;
            height: 150px;
            width: 150px;
            text-align: center;
        }
        .round{
            border-radius: 20px;
        }
        .fullRound{
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="round">
        Round edged div
    </div>

    <div class="fullRound">
        Circular Div
    </div>
</body>

</html>

CSS 边框所有属性

所有与 **border** 相关的属性都列在下表中。

属性 描述 示例
border 一个简写属性，用于在一个声明中设置所有边框属性。
border-color 一个简写属性，用于设置元素的边框颜色。
border-style 一个简写属性，用于设置元素边框的样式（实线/虚线）。
border-width 一个简写属性，用于设置元素的边框宽度。
border-bottom 一个简写属性，用于设置元素的底部边框。
border-bottom-color 设置元素底部边框的颜色。
border-bottom-width 设置元素下边框的宽度。
border-bottom-style 设置元素下边框的样式。
border-left 一个简写属性，用于设置元素的左边框。
border-left-color 设置元素左边框的颜色。
border-left-width 设置元素左边框的宽度。
border-left-style 设置元素左边框的样式。
border-right 一个简写属性，用于设置元素的右边框。
border-right-color 设置元素右边框的颜色。
border-right-width 设置元素右边框的宽度。
border-right-style 设置元素右边框的样式。
border-top 一个简写属性，用于设置元素的上边框。
border-top-color 设置元素上边框的颜色。
border-top-width 设置元素上边框的宽度。
border-top-style 设置元素上边框的样式。
border-image 一个简写属性，用于设置边框图像。
border-image-outset 设置图像外边距，即边框图像区域超出边框框多少。
border-image-repeat 此属性确定是否应重复、圆角、间隔或拉伸边框图像。
border-image-source 设置作为元素边框的图像的源/路径。
border-image-slice 此属性显示如何在边框中切片图像。
border-image-width 设置要设置为边框的图像的宽度。
打印页面
上一页
下一页
广告