CSS学习11：边框（border）

最新推荐文章于 2024-06-24 11:02:57 发布

玉安_ZhangDe

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量4.4k

点赞数

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

本文链接：https://blog.csdn.net/qq_47373340/article/details/123743380

版权

CSS 专栏收录该内容

39 篇文章 7 订阅

订阅专栏

border语法：

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

例如：

border: 1px solid red;

属性	作用
border-width	自定义边框的粗细，单位是px
border-style	边框的样式
border-color	边框颜色

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 边框会撑大盒子 */
            border: 5px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-style的属性值如下：

none：没有边框

solid：边框为单实线（常用）

dashed：边框为虚线

dotted：边框为点线

border可以单独设置四周的边框

border-top         设置上边框

border-bottom   设置下边框

border-left   设置左边框

border-right        设置右边框

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* 边框是由上下左右四部分组成   这个比较常用 */
            border-top: 1px solid #000;
            border-right: 5px dotted #ccc;
            border-bottom: 10px dashed red;
            border-left: 5px solid green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框会影响实际盒子的大小

盒子模型的宽高会把边框的大小算进去，从而影响布局。解决方法：

测量盒子大小的时候不量边框的大小，直接量内容的宽高。
如果测量的时候包含了边框，则需要把宽高里边框的那一份减去。

玉安_ZhangDe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
CSS学习11：边框（border）

目录border语法：border-style的属性值如下：border可以单独设置四周的边框边框会影响实际盒子的大小border语法：border : border-width || border-style || border-color; 例如：border: 1px solid red;属性作用 border-width 自定义边框的粗细，单位是px border-style 边框的样式 border-color...
复制链接

扫一扫