CSS 边框

边框、外边距和内边距

有3种属性可以控制例子的外观

分别是外边距maring，边框border，内边距padding

它们的值的大小会影响外观，在浏览器上显示的位置。

当内边距增大时，盒子的外观会变大。

设置内边距的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的宽和高</title>
    <style>
        div{  
            200px;
            height:200px;
            
            padding:16px;
            margin:32px;
            border:12px;
        }
    </style>
</head>
<body>
<h1>利永贞网</h1>
<div>学编程，上利永贞网</div>
<p>study hard, improve every day</p>
</body>
</html>

显示效果

在浏览器里看外边距maring，边框border，内边距padding效果

边框颜色

CSS 的 border-color可以设置边框颜色。

颜色值可以是RGB，也可以是十六进制，或是颜色名称。

边框颜色需要配置边框宽度才能显示出来。

边框有4个，边框颜色也有4个，它们是：

border-top-color
border-right-color
border-bottom-color
border-left-color

border-color可以写一个值，也可以写4个值，写4个值时，各个值之间用空格隔开，它们分别表示边框的顶部、右边、底部、左边的颜色。

边框宽度

border-width 属性可以设置边框的宽度。

宽度通常使用像素为单位，好控制。

边框宽度需要颜色和边框线条才能显示出来。

边框有4个，边框宽度也有4个，它们是：

border-top-width
border-right-width
border-bottom-width
border-left-width

border-width可以写一个值，也可以写4个值，写4个值时，各个值之间用空格隔开，它们分别表示边框的顶部、右边、底部、左边的边框宽度。

边框样式

border-style 显示边框的样式。

它的样式有：

none 和关键字 hidden 类似，不显示边框。
hidden 和关键字 none 类似，不显示边框。
dotted 显示为一系列圆点。
dashed 显示为一系列短的方形虚线。
solid 显示为一条实线。
double 显示为一条双实线。
groove 显示为有雕刻效果的边框，样式与 ridge 相反。
ridge 显示为有浮雕效果的边框，样式与 groove 相反。
inset 显示为有陷入效果的边框，样式与 outset 相反。
outset 显示为有突出效果的边框，样式与 inset 相反。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框和颜色</title>
    <style>
        div{
            50px;
            height:50px;
            
            margin:16px;
        }
        div.none{
            border-style:none;
        }
        div.hidden{
            border-style:hidden;
        }
        div.dotted{
            border-style:dotted;
        }
        div.dashed{
            border-style:dashed;
        }   
        div.solid{
            border-style:solid;
        }   
        div.double{
            border-style:double;
        }   
        div.groove{
            border-style:groove;
        }   
        div.ridge{
            border-style:ridge;
        }   
        div.inset{
            border-style:inset;
        }
        div.outset{
            border-style:outset;
        }       
    </style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
<div class="none"></div>
<div class="hidden"></div>
<div class="dotted"></div>
<div class="dashed"></div>
<div class="solid"></div>
<div class="double"></div>
<div class="groove"></div>
<div class="ridge"></div>
<div class="inset"></div>
<div class="outset"></div>
</body>
</html>

边框有4个，边框样式也有4个，它们是：

border-top-style
border-right-style
border-bottom-style
border-left-style

border-style可以写一个值，也可以写4个值，写4个值时，各个值之间用空格隔开，它们分别表示边框的顶部、右边、底部、左边的边框样式。

边框的快捷方式

边框具有宽度、样式、颜色等3个属性，一个一个地设置工作量有点大。

CSS也提供了减负的方式，那就是边框的快捷方式写法：

border: 宽度样式颜色;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框和颜色</title>
    <style>
        div{
            50px;
            height:50px;
            
            border: 1px solid red;
        }       
    </style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
<div></div>
</body>
</html>