• 《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
  • 相关阅读:
    Java多并发（七）| Executor框架（四种线程池详解）
    382. 链表随机节点
    关于Android Studio 同步Gradle失败的解决方案
    可达矩阵-邻接矩阵-以及有向图的python绘制
    数据库连接池长时间不用，乍一用还用不了，结果是防火墙的锅
    评：MD制裁芯片，信息产业要回“石器时代”
    CSS之垂直水平居中的背后
    深入理解磁盘阵列（RAID）和逻辑卷管理（LVM）技术及应用指南
    17、Spring系列-SpringMVC-请求源码流程
    C 语言基础
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125612073