CSS基础---盒子模型边框属性

最新推荐文章于 2024-04-28 16:04:57 发布

是小穆啊

最新推荐文章于 2024-04-28 16:04:57 发布

阅读量439

点赞数

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

本文链接：https://blog.csdn.net/weixin_48055520/article/details/130281443

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在浏览网站时，我们会发现页面的内容都是按区域划分的。在页面中，每一块区域分别承载不同的内容，这些承载内容的区域就被称为盒子模型。盒子模型就是把HTML页面中的元素看作是一个方形的盒子，也就是一个盛装内容的容器。每个方形的盒子都由元素的内容、边框、内边距和外边距组成。

在这里插入图片描述

边框属性

为了分割页面中不同的盒子，常常需要给元素设置边框效果。在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性(border-width)、边框颜色属性(border-color)、单侧边框属性、边框的综合属性。

设置内容	样式属性	常用属性值
上边框	border-top-style：样式； border-top-width：宽度；border-top-color：颜色；border-top：宽度样式颜色
下边框	border-bottom-style：样式； border-bottom-width：宽度；border-bottom-color：颜色；border-bottom：宽度样式颜色
左边框	border-left-style：样式； border-left-width：宽度；border-left-color：颜色；border-left：宽度样式颜色
右边框	border-right-style：样式； border-right-width：宽度；border-right-color：颜色；border-right：宽度样式颜色
样式综合设置	border-style：上边 [右边下边左边]；	none 无（默认）、solid（单实线）、dash（虚线）、dotted（点线）、double（双实线）
宽度综合设置	border-width：上边 [右边下边左边]；	像素值
颜色综合设置	border-color：上边 [右边下边左边]；	颜色值、#十六进制、rgb（r，g，b）、rgb（r%，g%，b%）
边框综合设置	border：四边宽度四边样式四边颜色

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 10px;
        }

        /* 上边框属性 */
        div {
            border-top-style: solid;
            border-top-width: 10px;
            border-top-color: pink;

            /* 上边框综合设置 */
            /* border-top: 1opx solid pink */
        }

        /* 右边框属性 */
        div {
            border-right-style: dashed;
            border-right-width: 10px;
            border-right-color: red;

            /* 右边框综合设置 */
            /* border-right: 1opx solid pink */
        }

        /* 下边框属性 */
        div {
            border-bottom-style: dotted;
            border-bottom-width: 10px;
            border-bottom-color: blue;

            /* 下边框综合设置 */
            /* border-bottom: 1opx solid pink */
        }

        /* 左边框属性 */
        div {
            border-left-style: double;
            border-left-width: 10px;
            border-left-color: green;

            /* 左边框综合设置 */
            /* border-bottom: 1opx solid pink */
        }

        /* 样式综合设置、宽度综合设置、颜色综合设置 */
        #two {
            border-style: solid dotted;
            border-width: 10px 10px 10px;
            border-color: pink;
        }

        /* 边框综合设置 */
        #three {
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div id="one">
        盒子模型的边框属性
    </div>
    <div id="two">
        盒子模型2的边框属性
    </div>
    <div id="three">
        盒子模型3的边框属性
    </div>
</body>

</html>

在这里插入图片描述
在综合设置边框样式时，其属性值可以设置1~4个。当设置4个属性值时，边框样式的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框样式会采用值复制的原则，将省略的属性值默认为某一边的样式。设置3个属性值时，为上、左右、下；设置2个属性值时，为上下、左右，设置一个属性值时，为4边的公用样式。