• 《HTML+CSS+JavaScript》之第15章 边框样式

    《HTML+CSS+JavaScript》之第15章 边框样式

    15.1 边框样式简介

    几乎所有元素都可以定义边框。
    边框样式需同时定义border-width、border-style、border-color属性，才会有效果。

    边框样式属性

    属性说明
    border-width边框宽度
    border-style边框外观（虚线，实线等）
    border-color边框颜色

    15.2 整体样式

    15.2.1 边框属性

    1. border-width
      边框宽度，取值像素值。

    2. border-style
      边框外观，none、dashed、solid、hidden、dotted、double等。

    3. border-color
      边框颜色

    • div加上边框
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义所有div样式*/
        div
        {
            width:100px;
            height:30px;
        }
        /*定义单独div样式*/
        #div1{border:1px dashed red;}
        #div2{border:1px solid red;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • img加上边框
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img
        {
            border-width: 2px;
            border-style:solid;
            border-color:red;
        }
    </style>
</head>
<body>
    <img src="img/haizei.png" alt="海贼王之索隆">
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    15.2.2 简写形式

    border: 1px solid red;

    • 1

    等价于

    border-width:1px;
border-style:solid;
border-color:red;

    • 1
    • 2
    • 3
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{border:1px solid red;}
    </style>
</head>
<body>
    <div>绿叶学习网，给你初恋般的感觉。</div>
</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    15.3 局部样式

    单独一条边进行设置。

    1. 上边框border-top
    border-top-width:1px;
border-top-style:solid;
border-top-color:red;

border-top: 1px solid red;

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 下边框border-bottom
    border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;

border-bottom: 1px solid red;

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 左边框border-left
    border-left-width:1px;
border-left-style:solid;
border-left-color:red;

border-left: 1px solid red;

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 右边框border-right
    border-right-width:1px;
border-right-style:solid;
border-right-color:red;

border-right: 1px solid red;

    • 1
    • 2
    • 3
    • 4
    • 5
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;                       /*div元素宽为100px*/
            height:60px;                       /*div元素高为60px*/
            border-top:2px solid red;          /*上边框样式*/
            border-right:2px solid yellow;     /*右边框样式*/
            border-bottom:2px solid blue;      /*下边框样式*/
            border-left:2px solid green;       /*左边框样式*/
         }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;                 /*div元素宽为100px*/
            height:60px;                 /*div元素高为100px*/
            border:1px solid red;        /*边框整体样式*/
            border-bottom:0px;           /*去除下边框*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 等价
    border-bottom:0px;
border-bottom:0;
border-bottom:none;

    • 1
    • 2
    • 3
  • 相关阅读:
    牵手时代少年团，来伊份讲了一个“新鲜”故事
    JavaSE_多线程入门 线程安全 死锁 状态 通讯 线程池
    自动化测试-怎么存储测试用例
    less和scss语法详解
    【linux】日志和journalctl 管理查看日志
    .NET 7 的 AOT 到底能不能扛反编译？
    3D开发学习之笛卡尔坐标系
    2020金融密码杯
    K8S-遇到问题-解决日记
    软件测试人员必须知道的接口测试基础
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125612073