资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

CSS边框属性详解与实战

创作时间:

作者:

@小白创作中心

CSS边框属性详解与实战

引用

CSDN

https://blog.csdn.net/2401_82561004/article/details/142589528

CSS边框是Web开发中常用的技术手段，用于为HTML元素添加各种样式的边框。本文将详细介绍CSS中边框的相关属性，包括border-style、border-width、border-color以及border的简写属性，并通过多个示例展示如何使用这些属性来实现不同的边框效果。

CSS中的边框是围绕着元素内容和内边距的一条或多条线段，您可以自定义这些线段的样式、宽度以及颜色。您可以通过下面几个属性分别定义边框的样式、宽度和颜色：

border-style：设置边框的样式，例如实线、虚线等；
border-width：设置边框的宽度（厚度）；
border-color：设置边框的颜色；
border：上面三个边框属性的缩写。

1. border-style

border-style属性用来设置元素中所有边框的样式，或者单独为某个边框设置样式，其语法格式如下：

border-style: border-top-style border-right-style border-bottom-style border-left-style;

border-style属性的可选值如下：

值	描述
none	无边框
hidden	隐藏边框，与“none”类似
dotted	定义点状虚线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双实线边框，双实线边框的宽度等于border-width的值
groove	定义3D凹槽边框，其效果取决于border-color的值
ridge	定义3D垄状边框，其效果取决于border-color的值
inset	定义3D嵌入边框，其效果取决于border-color的值
outset	定义3D突出边框，其效果取决于border-color的值
inherit	从父元素继承边框样式

border-style属性有多种不同的用法：

如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的样式；
如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
如果只提供一个参数，这个参数将同时作用在四个边框上。

除了可以使用border-style属性设置元素的边框样式外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的样式：

border-bottom-style：设置下边框的样式；
border-top-style：设置上边框的样式；
border-left-style：设置左边框的样式；
border-right-style：设置右边框的样式。

示例：使用border-style属性为元素设置边框

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 100px;
            float: left;
            margin: 10px;
            border-width: 5px;
            border-color: red;
            text-align: center;
        }
        .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;
        }
        .four {
            border-top-style: solid;
            border-right-style: double;
            border-bottom-style: dashed;
            border-left-style: dotted;
        }      
    </style>
</head>
<body>
    <p class="none">none</p>
    <p class="hidden">hidden</p>
    <p class="dotted">dotted</p>
    <p class="dashed">dashed</p>
    <p class="solid">solid</p>
    <p class="double">double</p>
    <p class="groove">groove</p>
    <p class="ridge">ridge</p>
    <p class="inset">inset</p>
    <p class="outset">outset</p>
    <p class="four">four</p>
</body>
</html>

运行结果如下图所示：

2. border-width

border-width属性用来设置元素中所有边框的宽度，或者单独为某个边框设置宽度，其语法格式如下：

border-width: border-top-width border-right-width border-bottom-width border-left-width;

border-width属性的可选值如下：

值	描述
thin	定义较细的边框
medium	默认值，定义中等宽度的边框
thick	定义较粗的边框
length	使用数值加单位的形式设置具体的边框宽度，例如2px
inherit	从父元素继承边框的宽度

thin、medium、thick三个关键字并没有固定的值，它们的值取决于浏览器，例如在Chrome浏览器中三个关键字的值分别为1px、3px、5px。

同border-style属性相同，border-width属性同样支持多种不同的用法：

如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的宽度；
如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
如果只提供一个参数，这个参数将同时作用在四个边框上。

除了可以使用border-width属性设置元素的边框宽度外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度：

border-bottom-width：设置下边框的宽度；
border-top-width：设置上边框的宽度；
border-left-width：设置左边框的宽度；
border-right-width：设置右边框的宽度。

示例：使用border-width设置边框的宽度

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 100px;
            margin: 5px;
            float: left;
            border-style: solid;
            text-align: center;
        }
        .one{
            border-width: thin medium thick;
        }
        .two{
            border-width: 2px 5px;
        }
        .three{
            border-top-width: 1px;
            border-right-width: 2px;
            border-bottom-width: 3px;
            border-left-width: 4px;
        }
        .four{
            border-width: thin;
        }
    </style>
</head>
<body>
    <p class="one">one</p>
    <p class="two">two</p>
    <p class="three">three</p>
    <p class="four">four</p>
</body>
</html>

运行结果如下图所示：

3. border-color

border-color属性用来设置元素中所有边框的颜色，或者单独为某个边框设置颜色，其语法格式如下：

border-color: border-top-color border-right-color border-bottom-color border-left-color;

border-color属性的可选值如下：

值	描述
color_name	使用颜色名称来设置边框的颜色，例如red
hex_number	使用颜色的十六进制值来设置边框的颜色，例如#ff0000
rgb_number	使用rgb()函数设置边框的颜色，例如rgb(255,0,0)
transparent	默认值，设置边框颜色为透明
inherit	从父元素继承边框的颜色

同border-style属性相同，border-color属性同样支持多种不同的用法：

如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的颜色；
如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
如果只提供一个参数，这个参数将同时作用在四个边框上。

除了可以使用border-color属性设置元素的边框颜色外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的颜色：

border-bottom-color：设置下边框的颜色；
border-top-color：设置上边框的颜色；
border-left-color：设置左边框的颜色；
border-right-color：设置右边框的颜色。

示例：使用border-color设置边框的颜色

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 100px;
            margin: 5px;
            float: left;
            border-style: solid;
            border-width: 5px;
            text-align: center;
        }
        .one{
            border-color: green;
        }
        .two{
            border-color: #0000CC;
        }
        .three{
            border-top-color: #009900;      /*绿色*/
            border-right-color: #FF0000;    /*红色*/
            border-bottom-color: #330000;   /*黑色*/
            border-left-color: #0000CC;     /*蓝色*/
        }
    </style>
</head>
<body>
    <p class="one">one</p>
    <p class="two">two</p>
    <p class="three">three</p>
</body>
</html>

运行结果如下图所示：

4. border

border属性是上面介绍的border-width、border-style、border-color三种属性的简写，使用border属性可以同时定义上述三个属性，语法格式如下：

border: border-width border-style border-color;

其中border-width用来设置边框的宽度；border-style用来设置边框的样式；border-color用来设置边框的颜色。

示例：使用border属性为元素设置边框

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            width: 100px;
            float: left;
            margin: 5px;
        }
        .one {
            border: 2px solid green;
        }
        .two {
            border: 5px double red;
        }
        .three {
            border: 3px dotted blue;
        }
    </style>
</head>
<body>
    <p class="one">one</p>
    <p class="two">two</p>
    <p class="three">three</p>
</body>
</html>

运行结果如下图所示：

提示：border属性的三个参数（border-width、border-style、border-color）并不需要遵守固定的顺序，将它们的顺序打乱也是可以的。另外，也可以省略其中的某个参数，例如border: soild red;，省略的参数将被设置为该参数的默认值。

除了可以使用border属性统一设置边框的宽度、样式、颜色外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度、样式、颜色：

border-bottom：统一设置下边框的宽度、样式、颜色；
border-top：统一设置上边框的宽度、样式、颜色；
border-left：统一设置左边框的宽度、样式、颜色；
border-right：统一设置右边框的宽度、样式、颜色。

通过组合本节中介绍这些属性，可以实现一些意想不到的效果，例如我们可以通过边框来绘制三角形，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 0px;
            margin: 5px;
            float: left;
        }
        .top {
            border: 50px solid;
            border-color: red transparent transparent;
        }
        .bottom {
            border-width: 0 50px 50px;
            border-style: solid;
            border-color: transparent transparent red;
        }
        .left {
            border-top: 50px solid transparent;
            border-left: 50px solid black;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .right {
            border-width: 50px 50px 50px 0px;
            border-style: solid;
            border-color: transparent red transparent transparent;
        }       
    </style>
</head>
<body>
    <p class="top"></p>
    <p class="bottom"></p>
    <p class="left"></p>
    <p class="right"></p>
</body>
</html>

运行结果如下图所示：