• 《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
  • 相关阅读:
    [附源码]计算机毕业设计springboot高校流浪动物领养网站
    OceanMind海睿思数据中台迎来重磅更新，使用体验全面提升！
    2D物理引擎 Box2D for javascript Games 第七章 子弹和感应器
    Redis之zset类型
    二维码智慧门牌管理系统：确保数据准确，强制校验GPS信号强度
    创建你的第一个Windows程序
    c#基础逻辑练习案例
    JavaScript模块化
    使用gateway对用户认证（用于确定用户是否登录）
    (Java版)转反串符字累很天聊他和长学海云 ,话说着倒欢喜三张身彼施还道之彼以算打长学海云是于
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125612073