CSS边框

aMereNobody

已于 2024-04-14 12:47:09 修改

阅读量3.3k

点赞数 48

分类专栏： CSS 文章标签： css css3 前端 html

于 2024-04-14 12:37:15 首次发布

本文链接：https://blog.csdn.net/lh11223326/article/details/137741556

版权

CSS 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

内容区（content）：

内容区就是盒子里面用来存放东西的区域，里面你可以随便放如:文本，图片，视频等等，内容区域有三个属性：width，height，overflow，其中width和height是用来指定内容区域的宽度和高度，因为如果内容太多就会超出范围导致溢出，这个时候我们就可以使用overflow属性来处理溢出的区域。其属性的可选值如下所示：

hidden:表示隐藏这块溢出的区域。
visible：表示显示溢出的区域(这部分放到盒子外面)。
scroll：如果内容溢出了，就添加一个滚动条，可以通过这个滚动条左右上下查看所有的内容。
auto：让浏览器自己去处理这部分。

如下是示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: red;
            color: aqua;
            width: 100px;
            height: 40px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div>
        这是一个内容区域的设置，后面内容要使用滚动条进行查看。
    </div>
</body>

</html>

上述代码运行结果如下所示：我们把<div>盒子背景变为红色，字体颜色为蓝色，大小为100px宽度和40px宽度，此时盒子大小不够放不下所有的内容，我添加了一个overflow把其设置为scroll就为溢出的区域添加了一个可以上下滚动的条子。此时就可以通过这个滚动条查看盒子所有的文本内容。 CSS设置网页背景_css 设置背景图-CSDN博客 CSS设置内外边距-CSDN博客 0基础看这一篇就够了HTML教程(详细汇总)_php代码格式-CSDN博客

边框（border）：

前言：

边框就是内边距到外边距的这一段距离，就像我们日常用的盒子它的壳或者是校园的围墙。一般情况下是一条线，我们可以自己设置这些线段的样式。如宽度，颜色等等。我们可以用以下几种属性来设置边框：

border-style：设置边框的样式，如：实线，虚线等等。
border-width：用来设置边框的宽度的(厚度)。
border-color：可以用来设置边框的颜色。
border：可以用这个属性直接设置边框的三种属性。

示例：

border-样式(颜色...)，如border-style，border-width等等，如果用其设置属性的话需要注意一下顺序：

如果你要一次设置四个参数，那么需要按照上，右，下，左的顺序依次设置元素四个方向的边框。
如果你只提供三个参数，那第一个将会用来设置上面，第二个将会被用来设置左，右两个方向，最后一个将会被用来设置下面。
如果一次只提供两个参数，那第一个参数会被用来上，下两个方向，另外一个参数会被用来设置左，右两个方向。
如果你只提供一个参数，那么这个参数将是四个方向的值。

border - 方向(上下左右) - 样式其说明如下：

border-bottom-样式：设置下面对应的边框样式。
border-top-样式：设置上面对应的边框样式。
border-left-样式：设置左边对应的边框样式。
border-right-样式：设置右边对应的边框样式。

style样式的可选属性如下所示：

值	说明
none	没有边框。
hidden	把边框隐藏，跟none类似。
dotted	定义点状虚线边框。
deshed	定义虚线边框。
solid	定义实线边框。
double	定义双实线边框，双实线边框的宽度等于border-width的值。
groove	定义3D凹槽边框，其效果取决于border-color的值。
ridge	定义3D垄状边框，其效果取决于border-color的值。
inset	定义3D嵌入边框，其效果取决于border-color的值。
outset	定义3D突出边框，其效果取决于border-color的值。
inherit	从父元素中继承对边框样式的设置。

上述属性的示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test1 {
            border-top: dashed #c91010 3px;
            border-bottom: outset #8cd319 5px;
            border-left: groove rgb(101, 43, 182) 7px;
            border-right: inset rgb(207, 32, 169) 9px;
        }

    </style>
</head>

<body>
    <p class="test1">啥都没得1</p>
</body>

</html>

代码运行结果如下所示：可以明显看到上面的是虚线，左边的是凹槽边框，下面是突出边框，右边是嵌入边框。

width样式可选属性如下：

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

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: solid;
            width: 150px;
            border-top-color: blue;
            border-bottom-color: red;
            border-left-color: #901f1f;
            /* border-color: red; */
            border-right-color: rgb(27, 156, 96);
        }

        p {
            border-top-width: 7px;
            border-bottom-width: 3px;
            border-right-width: 2px;
            border-left-width: 9px;
        }
    </style>
</head>

<body>
    <p>color样式的定义</p>
</body>

</html>

代码运行结果如下所示：可以明显看到上面7px表现出来的厚度，还有左边9px的厚度，以及右边的细小，和下面的3px。

color样式的可选值如下所示：

值	说明
color_name	使用颜色名称来设置边框的颜色，如blue。
hex_number	使用颜色的十六进制来设置边框的颜色，如:#101010.
rgb_number	使用rgb()函数来设置边框的颜色，如rgb(255,0,0).
transparent	默认值，边框为透明。
inherit	从父元素里继承对边框颜色的设置。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: solid 3px;
            width: 150px;
            border-top-color: blue;
            border-bottom-color: red;
            border-left-color: #901f1f;
            /* border-color: red; */
            border-right-color: rgb(27, 156, 96);
        }
    </style>
</head>

<body>
    <p>color样式的定义</p>
</body>

</html>

上述代码运行结果如下所示：可以看到上面被设为紫色，下面为红色，左边为#901f1f使用了十六进制，右边为绿色，使用了rgb来配置三原色。

border 可以一同设置style,color,width三个属性，设置这个三个属性并不需要遵循某些顺序，我们还可以border-方向来设置如下所示：

border-bottom ：一起设置下面的宽度，样式和颜色。
border- top ：一起设置上面的宽度，样式和颜色。
border- left ：一起设置左边的宽度，样式和颜色。
border- right ：一起设置右边的宽度，样式和颜色。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test1 {
            border-top: dashed #c91010 3px;
            border-bottom: outset #8cd319 5px;
            border-left: groove rgb(101, 43, 182) 7px;
            border-right: inset rgb(207, 32, 169) 9px;
        }

        .test2 {
            border: double rgb(32, 168, 27) 6px;
        }
    </style>
</head>

<body>
    <p class="test1">啥都没得1</p>
    <p class="test2">啥都没得2</p>
</body>

</html>

运行结果如下所示：