↩ zhcn 编程语言 Web相关 JSON 非公開: CSS边框样式（边框）

CSS边框样式（边框）

CSS 边框是围绕元素内容和填充的一个或多个线段，您可以自定义其样式、宽度和颜色。您可以使用以下属性定义边框样式、宽度和颜色：

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

1.边框式

border-style 属性用于设置元素内所有边框的样式，或单独设置特定边框的样式，并具有以下语法：

边框样式：上边框样式右边框样式下边框样式左边框样式；

border-style属性的可选值为：

价值	解释
没有任何	无框的
隐	与“None”类似，隐藏边框
点缀的	定义虚线边框
虚线	定义虚线边框
坚硬的	定义实心边框
双倍的	定义双实线边框。双实线边框的宽度等于 border-width 值。
槽	定义一个 3D 凹口边框，其效果取决于 border-color 的值
岭	定义一个 3D 边缘边框，其效果取决于 border-color 的值
插图	定义一个 3D 插入边框，其效果取决于 border-color 的值
一开始	定义 3D 突出显示边框。其效果取决于border-color的值。
继承	继承父元素的边框样式

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>

执行结果如下图所示。

[标题id =“attachment_569”对齐=“aligncenter”宽度=“1024”]

图：边框样式属性演示[/caption]

2.边框宽度

border-width 属性用于设置元素中所有边框的宽度，或仅设置边框的宽度，其语法为：

边框宽度：边框顶部宽度边框右侧宽度边框底部宽度边框左侧宽度；

border-width 属性的可选值有：

价值	解释
薄的	定义更薄的边框
中等的	默认值。定义中等宽度边框
厚的	定义粗边框
长度	使用值和单位格式设置特定的边框宽度，例如 2px
继承	从父元素继承边框宽度

Thin、Medium、Thick 这三个关键字没有固定的值；不同浏览器的值也不同，例如在 Chrome 浏览器中，这三个关键字的值分别是 1px、3px 和 5px。。

与 border-style 属性一样，border-width 属性支持多种不同的用途。

如果指定了所有四个参数，则按以下顺序设置边框四个边的宽度：上、右、下、左。
如果指定三个参数，第一个参数影响上边框，第二个参数影响左右边框，第三个参数影响下边框。
如果指定两个参数，第一个参数影响上边框和下边框，第二个参数影响左边框和右边框。
如果只指定一个参数，则该参数同时影响所有四个边框。

除了使用 border-width 属性设置元素边框的宽度外，还可以使用以下属性设置元素的上、下、左、右边框的宽度： Masu。

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">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
    <p class="four">四</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_570”对齐=“aligncenter”宽度=“846”]

图：border-width属性演示[/caption]

3.边框颜色

border-color属性用于设置元素内所有边框的颜色或单独设置边框颜色，其语法如下：

边框颜色：上边框颜色右边框颜色下边框颜色左边框颜色；

border-color 属性的可选值为：

价值	解释
颜色名称	使用颜色名称设置边框颜色，例如红色
十六进制数	使用颜色的十六进制值（例如，#ff0000）设置边框颜色。
RGB_数字	使用rgb()函数设置边框颜色，如rgb(255,0,0)
透明的	默认值，边框颜色设置为透明
继承	从父元素继承边框颜色

与 border-style 属性类似，border-color 属性支持多种不同的用途。

如果指定了所有四个参数，则框架的四个边按以下顺序着色：上、右、下、左。
如果指定三个参数，第一个参数影响上边框，第二个参数影响左右边框，第三个参数影响下边框。
如果指定两个参数，第一个参数影响上边框和下边框，第二个参数影响左边框和右边框。
如果只指定一个参数，则该参数同时影响所有四个边框。

除了使用 border-color 属性设置元素的边框颜色外，还可以使用以下属性设置元素的上、下、左、右边框颜色： Masu.

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">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_571”对齐=“aligncenter”宽度=“673”]

图：border-color属性演示[/caption]

border 属性是上面介绍的 border-width、border-style 和 border-color 属性的缩写。 border 属性可以同时定义上述三个属性，其语法如下：正确的。

border：边框宽度、边框样式、边框颜色；

其中，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">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_572”对齐=“aligncenter”宽度=“654”]

图：边框属性演示[/caption]

提示：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>

执行结果如下图所示。

[标题id =“attachment_573”对齐=“aligncenter”宽度=“747”]

插图：画一个带边框的三角形[/caption]

JSON

CSS 边框是围绕元素内容和填充的一个或多个线段，您可以自定义其样式、宽度和颜色。您可以使用以下属性定义边框样式、宽度和颜色：

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

1.边框式

border-style 属性用于设置元素内所有边框的样式，或单独设置特定边框的样式，并具有以下语法：

边框样式：上边框样式右边框样式下边框样式左边框样式；

border-style属性的可选值为：

价值	解释
没有任何	无框的
隐	与“None”类似，隐藏边框
点缀的	定义虚线边框
虚线	定义虚线边框
坚硬的	定义实心边框
双倍的	定义双实线边框。双实线边框的宽度等于 border-width 值。
槽	定义一个 3D 凹口边框，其效果取决于 border-color 的值
岭	定义一个 3D 边缘边框，其效果取决于 border-color 的值
插图	定义一个 3D 插入边框，其效果取决于 border-color 的值
一开始	定义 3D 突出显示边框。其效果取决于border-color的值。
继承	继承父元素的边框样式

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>

执行结果如下图所示。

[标题id =“attachment_569”对齐=“aligncenter”宽度=“1024”]

图：边框样式属性演示[/caption]

2.边框宽度

border-width 属性用于设置元素中所有边框的宽度，或仅设置边框的宽度，其语法为：

边框宽度：边框顶部宽度边框右侧宽度边框底部宽度边框左侧宽度；

border-width 属性的可选值有：

价值	解释
薄的	定义更薄的边框
中等的	默认值。定义中等宽度边框
厚的	定义粗边框
长度	使用值和单位格式设置特定的边框宽度，例如 2px
继承	从父元素继承边框宽度

Thin、Medium、Thick 这三个关键字没有固定的值；不同浏览器的值也不同，例如在 Chrome 浏览器中，这三个关键字的值分别是 1px、3px 和 5px。。

与 border-style 属性一样，border-width 属性支持多种不同的用途。

如果指定了所有四个参数，则按以下顺序设置边框四个边的宽度：上、右、下、左。
如果指定三个参数，第一个参数影响上边框，第二个参数影响左右边框，第三个参数影响下边框。
如果指定两个参数，第一个参数影响上边框和下边框，第二个参数影响左边框和右边框。
如果只指定一个参数，则该参数同时影响所有四个边框。

除了使用 border-width 属性设置元素边框的宽度外，还可以使用以下属性设置元素的上、下、左、右边框的宽度： Masu。

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">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
    <p class="four">四</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_570”对齐=“aligncenter”宽度=“846”]

图：border-width属性演示[/caption]

3.边框颜色

border-color属性用于设置元素内所有边框的颜色或单独设置边框颜色，其语法如下：

边框颜色：上边框颜色右边框颜色下边框颜色左边框颜色；

border-color 属性的可选值为：

价值	解释
颜色名称	使用颜色名称设置边框颜色，例如红色
十六进制数	使用颜色的十六进制值（例如，#ff0000）设置边框颜色。
RGB_数字	使用rgb()函数设置边框颜色，如rgb(255,0,0)
透明的	默认值，边框颜色设置为透明
继承	从父元素继承边框颜色

与 border-style 属性类似，border-color 属性支持多种不同的用途。

如果指定了所有四个参数，则框架的四个边按以下顺序着色：上、右、下、左。
如果指定三个参数，第一个参数影响上边框，第二个参数影响左右边框，第三个参数影响下边框。
如果指定两个参数，第一个参数影响上边框和下边框，第二个参数影响左边框和右边框。
如果只指定一个参数，则该参数同时影响所有四个边框。

除了使用 border-color 属性设置元素的边框颜色外，还可以使用以下属性设置元素的上、下、左、右边框颜色： Masu.

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">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_571”对齐=“aligncenter”宽度=“673”]

图：border-color属性演示[/caption]

border 属性是上面介绍的 border-width、border-style 和 border-color 属性的缩写。 border 属性可以同时定义上述三个属性，其语法如下：正确的。

border：边框宽度、边框样式、边框颜色；

其中，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">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_572”对齐=“aligncenter”宽度=“654”]

图：边框属性演示[/caption]

除了使用 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>

执行结果如下图所示。

[标题id =“attachment_573”对齐=“aligncenter”宽度=“747”]

插图：画一个带边框的三角形[/caption]

JSON