首页 前端CSS正文

CSS - 边框

原创
admin 4个月前 (08-07) 阅读数 21 #CSS

CSS - 边框

边框属性可以在HTML元素周围创建边框，例如div、图像或文本。您可以通过更改元素的每一边的边框样式、宽度、圆角和颜色来自定义边框。边框有助于提高内容的可读性，因为它提供了内容的分隔，并且对于突出显示网页的重要部分也很有用。

CSS边框示例

您可以在下面的部分尝试设置边框的不同方法，也可以更改这些值。

CSS边框交互式示例

CSS边框交互式示例

CSS边框简写属性

您可以使用简写CSS的border属性来指定边框宽度、样式和颜色。

语法

border简写属性的语法如下：

border: border-width border-style border-color | initial | inherit;

示例

在此示例中，我们使用CSS的border属性来设置div和段落元素的边框。

<html>
<head>
    <style>
        p {
            border: solid 4px grey;
            padding: 10px;
        }
        div{
            border: darkred solid 5px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p> 检查段落的边框！！！</p>
    <div> 检查div的边框！！！</div>
</body>
</html>

边框属性的类型

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

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

CSS border-style属性

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

示例

在此示例中，我们使用border-style属性为每个段落元素设置不同的边框样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        .none {
            border-style: none;
        }
        .hidden {
            border-style: hidden;
        }
        .dotted {
            border-style: dotted;
        }
        .dashed {
            border-style: dashed;
        }
        .solid {
            border-style: solid;
        }
        .double {
            border-style: double;
        }
        .groove {
            border-style: groove;
        }
        .ridge {
            border-style: ridge;
        }
        .inset {
            border-style: inset;
        }
        .outset {
            border-style: outset;
        }
    </style>
</head>
<body>
    <h1>边框样式属性</h1>
    <p class="none"> 无边框。</p>
    <p class="hidden"> 隐藏边框。</p>
    <p class="dotted"> 点线边框。</p>
    <p class="dashed"> 虚线边框。</p>
    <p class="solid"> 实线边框。</p>
    <p class="double"> 双线边框。</p>
    <p class="groove"> 3D凹槽边框。</p>
    <p class="ridge"> 3D脊线边框。</p>
    <p class="inset"> 3D内嵌边框。</p>
    <p class="outset"> 3D外凸边框。</p>
</body>
</html>

各边的边框样式

您可以为元素的每一边指定不同的边框样式。要为元素的各边设置border-style属性，我们使用以下CSS属性：

示例

在此示例中，我们使用CSS的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>各边的边框样式</h2>
    <p>所有边框都有不同的样式。</p>
</body>
</html>

CSS border-width属性

border-width用于指定元素周围边框的粗细。它可以有thin、medium、thick值或任何长度（px或em）。让我们看一个示例。

示例

在此示例中，我们使用CSS的border-width属性为每个段落元素设置不同的边框宽度。

<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">细宽度。</p>
    <p class="medium">中等宽度。</p>
    <p class="thick">粗宽度。</p>
    <p class="length">边框宽度：10px。</p>
</body>
</html>
在声明border-width属性之前，请先声明border-style属性，否则边框效果将不可见。

各边的边框宽度

您可以为元素的每一边指定不同的边框宽度。要为各边设置border-width属性，请使用以下CSS属性：

示例

在此示例中，我们使用CSS的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>
    <h2>各边的边框宽度</h2>
    <p>所有边框都有不同的宽度。</p>
</body>
</html>

CSS border-color属性

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

示例

在此示例中，我们使用CSS的border-color属性使用颜色名称和十六进制值设置段落元素的边框颜色。

<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">边框颜色：红色</p>
    <p class="hex">边框颜色：#00ff00。</p>
</body>
</html>
在声明border-color属性之前，请先声明border-style属性，否则边框效果将不可见。

各边的边框颜色

您可以为元素的每一边指定不同的边框颜色。要为各边设置border-color属性，请使用以下CSS属性：

示例

在此示例中，我们使用CSS的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>
    <h2>各边的边框颜色</h2>
    <p>所有边框都有不同的颜色。</p>
</body>
</html>

各边的边框简写属性

要将所有边框属性（如样式、宽度和颜色）仅应用于元素的一边，我们可以使用各边的边框简写属性。各边的边框简写属性如下：

语法

各边边框简写属性的语法如下：

border-top: 4px solid red;
border-bottom: 2px dashed blue;
border-left: 6px dotted green;
border-right: 8px double yellow;

示例

在此示例中，我们使用各边的边框简写属性为每一边设置不同的边框。

<html>
<head>
    <style>
        p {
            border-top: red dashed thick;
            border-right: solid #0000ff medium;
            border-bottom: thin dotted rgb(100,123,111);
            border-left: rgba(50,123,111,0.4) 15px double;
            padding: 5px;
        }
    </style>
</head>
<body>
    <p> 检查段落的边框！！！</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> 检查边框！！！</div>
</body>
</html>

将边框应用于内联元素

可以以类似的方式为任何内联元素添加边框。边框的厚度不会影响元素的行高。如果在内联元素中指定了左右边框，它将置换边框周围的文本。这是将边框应用于内联元素的示例。

示例

在此示例中，我们在span（内联元素）上使用了边框属性。

<html>
<head>
    <style>
        span {
            border: 5px solid black;
            background-color: silver;
        }
    </style>
</head>
<body>
    <p> 
        检查带有边框的<span>内联元素</span>，
        其余部分没有边框。
    </p>
</body>
</html>

CSS border-image属性

要将图像设置为另一个元素（如div、span、body、段落等）的边框，您可以使用border-image属性。首先，您需要在提供图像源之前声明border-style属性，否则不会显示图像作为边框。

示例

这是使用border-image属性将图像设置为边框的示例：

<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>
            这是使用CSS设置
            边框图像的示例
        </p>
    </div>
</body>
</html>

CSS border-radius属性

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

示例

在此示例中，我们使用border-radius属性创建了一个圆角正方形和一个圆形。

<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">
        圆角div
    </div>

    <div class="fullRound">
        圆形div
    </div>
</body>
</html>

CSS边框所有属性

与border相关的所有属性列在下表中：

属性 描述 示例
border 在一个声明中设置所有边框属性的简写属性
border-color 设置元素边框颜色的简写属性。
border-style 设置元素边框样式（实线/虚线）的简写属性
border-width 设置元素边框宽度的简写属性。
border-bottom 设置元素底部边框的简写属性。
border-bottom-color 设置元素底部边框的颜色。
上一篇： CSS - 表格样式 下一篇： CSS - 边框块属性
相关文章
admin

admin

作者文章
浏览更多
热门
最新文章
标签列表
    闽ICP备2022017130号-1
    Powered By Z-BlogPHP Theme By 编程老白