border之border-style用法_border-style: double;-优快云博客

本文详细介绍了CSS中border-style属性的使用方法，特别是double样式的特点及其在不同宽度下的表现形式，并通过实例展示了如何利用该样式实现特定的设计效果。

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

border-style

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-style兼容性很好，基本所有浏览器都兼容

这里写图片描述

border-style拥有一下属性值

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

这里主要使用border-style：double的小用法

实例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>border-style:double</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        div{
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-bottom: 20px;
        }

        div.box1{
            height: 50px;
            border: 6px double red;
        }

        div.box2{
            height: 50px;
            border: 12px double red;
        }

        div.box3{
            height: 50px;
            border: 24px double red;
        }

    </style>
</head>
<body>
    <div class="box1">我是box1</div>

    <div class="box2">我是box2</div>

    <div class="box3">我是box3</div>
</body>
</html>

效果如下：

这里写图片描述

有图中咱可以看出“双线double” 实际上有三部分组成：
这里写图片描述

也就是效果图中所示那样

border-width	外框宽度	中间透明宽度	内框宽度
6px	2px	2px	2px
12px	4px	4px	4px
24px	8px	8px	8px

我给定的border宽度正好是3的倍数，如果不是三的倍数，那么外框，中间，内框的宽度该如何分配呢？效果图如下：
这里写图片描述

可以看出他们之间是有细微差别的，外框宽度、中间透明宽度、内框宽度之间相差1px。

border-width	外框宽度	中间透明宽度	内框宽度
7px	2px	3px	2px
8px	3px	2px	3px
9px	3px	3px	3px

border-style：double ；实用如下：这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.box{
            background-color: gray;
            padding: 20px;
        }
        div.nav{
            width: 30px;
            height: 4px;
            border-top: 12px double ;
            border-bottom: 4px solid black;
            color: red;
        }

        div.nav:hover{
            color: white;
            border-bottom-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="nav"></div>
    </div>
</body>
</html>